.clocks {
width: 860px;
display: flex;
justify-content: flex-start;
}
.clock-card {
width: 250px;
height: 300px;
margin-right: 40px;
padding: 20px;
background-color: #FDFDFB;
padding-top: 20px;
position: relative;
cursor: pointer;
text-align: center;
margin-bottom: 40px;
&__banner {
& .banner-title {
opacity: 0;
}
}
& .card-img {
max-width: 250px;
max-height: 300px;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
&:nth-child(3n) {
margin-right: 0;
}
& .card-title {
@include font-family-normal;
font-weight: bold;
line-height: 21px;
letter-spacing: 0.05em;
color: #444240;
margin-top: 0;
margin-bottom: 9px;
text-align: left;
z-index: 10;
}
& .card-price {
@include font-family-normal;
line-height: 16px;
color: #636261;
margin-top: 0;
margin-bottom: 0;
z-index: 10;
text-align: left;
}
}
.card-icons{
position: absolute;
right: 20px;
top: 20px;
z-index: 10;
& .add-card-favorites {
background-image: url(../img/heart.svg);
right: 55px;
&:hover {
background-image: url(../img/heart_active.svg);
filter: none;
}
&__active {
background-image: url(../img/heart_active.svg);
}
}
& .add-card-basket {
background-image: url(../img/basket.svg);
right: 20px;
}
& .card-icon{
width: 25px;
height: 25px;
background-repeat: no-repeat;
background-color: transparent;
border: none;
background-position: center;
cursor: pointer;
outline: none;
z-index: 10;
&:hover {
filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.5));
}
}
}
<div class="сlocks">
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon" data-id="card-1"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_1.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon" data-id="card-2"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_2.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon" data-id="card-3"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_3.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_4.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites add-card-favorites__active card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_5.png" alt="">
</a>
<a href="" class="clock-card">
<h2>
TECHNE
</h2>
<img class="card-img" src="img/banner_catalog.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_6.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_7.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_8.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_9.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_10.png" alt="">
</a>
<a href="" class="clock-card">
<div class="card-icons">
<button class="add-card-favorites card-icon"></button>
<button class="add-card-basket card-icon"></button>
</div>
<h2 class="card-title">
TECHNE
</h2>
<p class="card-price">
22 700 ₽
</p>
<img class="card-img" src="img/watch_11.png" alt="">
</a>
</div>