При наведении курсора появляется настоящий цветовой эффект картинки, на фото видно.
Как добавить карточку
Сам код:
<div class="stcard-container">
<div class="stcard">
<img alt="image" src="http://ipic.su/img/img7/fs/19072.1668169519.jpg"/>
<div class="stcard-title">Название карточки</div>
<p>Описание карточки</p>
</div>
<div class="stcard">
<img alt="image" src="http://ipic.su/img/img7/fs/19072.1668169519.jpg"/>
<div class="stcard-title">Название карточки</div>
<p>Описание карточки</p>
</div>
<!-- Еще карточки -->
<div class="stcard">
<img alt="image" src="http://ipic.su/img/img7/fs/19072.1668169519.jpg"/>
<div class="stcard-title">Название карточки</div>
<p>Описание карточки</p>
</div>
</div>
<style>
.stcard-container {
display: flex;
justify-content: center;
flex-wrap: wrap;
padding: 20px 0;
}
.stcard {
display: flex;
flex-direction: column;
padding: 12px 12px 6px;
background: #f8f3e8; /*цвет фона карточки*/
box-shadow: 0 0 40px rgba(0, 0, 0, 0.2), 0 0 40px rgba(0, 0, 0, 0.2); /*тень карточки*/
border-radius: 6px; /*скругление карточки*/
flex: 1 0 300px;
max-width: 400px;
align-self: center;
}
.stcard img {
width: 100%;/*размер картинки*/
aspect-ratio: 2/1;
object-fit: cover;
border-radius: 6px; /*скругление картинки*/
filter: sepia(100%); /*затемнение картинки*/
transition: filter 0.5s;
margin-bottom: 10px; /*отступ картинки от текста*/
}
.stcard:hover img {
filter: sepia(0)
}
.stcard .stcard-title {
margin: 6px 10px 10px;
font-family: 'Roboto', sans-serif; /*шрифт заголовка*/
font-weight: bold; /*насыщенность*/
font-size: 19px; /*размер*/
line-height: 1.1; /*интервал*/
color: #a18342; /*цвет шрифта*/
text-align: center; /*расположение шрифта*/
}
.stcard p {
font-size: 15px; /*размер шрифта описания*/
text-align: center;
margin: 0 0 10px 0;
line-height: 1.3;
}
</style>
<script>
let stcard = document.querySelectorAll(".stcard"), rotate;
for(let i = 0; i < stcard.length; i++){
rotate = Math.random() * 5 * (Math.round(Math.random()) ? 1 : -1);
stcard[i].style.transform = "rotate("+ rotate +"deg)";
}
</script>
