Есть вот такой сайт на нем есть элементы (BEDROOM/KITCHEN/LIVING ROOM) которые при наведении масштабируются не меняя своих размеров. Знаю есть transform:scale()
но он увеличивает размер, как сделать по типу как на сайте?
1 ответ
Простейший пример
div.block {
position: relative;
width: 200px;
height: 147px;
cursor: pointer;
overflow: hidden;
}
div.block img {
width: 100%;
height: 100%;
transition: all .3s ease-out;
}
div.block:hover img {
transform: scale(1.2);
}
div.block div.title {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0);
transition: all .3s ease-out;
}
div.block:hover div.title {background-color: rgba(255, 255, 255, 0.39);}
div.block div.title h1 {
display:block;
position:absolute;
top:50%;
left:50%;
opacity: 0;
transition: all .3s ease-out;
transform: translate(-50%,-50%);
}
div.block:hover div.title h1 {opacity:1}
<div class="block">
<img src="http://deerdesign.vn/wp-content/uploads/2016/10/PK_Scandinavian-Vintage-1024x755.jpg">
<div class="title">
<h1>Текст</h1>
</div>
</div>
-
Для кого-то простейший, а для меня пока высшая математика) Спасибо, буду разбирать. Commented 26 дек. 2016 в 22:23