Продолжаю учиться верстке и хочу сделать такую штуку:
Изначально на миниатюре показывается только уголок картинки. Нужно чтобы при наведении блок плавно увеличивался и показывался весь размер картинки. Пробовал как-то делать через background-position, но в моем случае картинка должна лежать в Html, поэтому такой вариант не подходит.
Сейчас моя демка выглядит вот так. https://codepen.io/anon/pen/QxEYxe
.product {
height: 300px;
background: orange;
width: 100%;
text-align: center;
transition: 1s all;
overflow: hidden;
}
.img-hide {
opacity: 0;
transition: 1s all;
}
.text-hide {
opacity: 0;
transition: 1s all;
font-size: 40px;
color: red;
}
.product:hover {
transform: scale(1.2);
}
.product:hover .img-hide {
opacity: 1;
}
.product:hover .text-hide {
opacity: 1;
}
<div class="container">
<div class="row">
<div class="col-md-3">
<div class="product">
<div class="text">
text text text
</div>
<div class="img-hide">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="text-hide">
this is text hide
</div>
</div>
</div>
<div class="col-md-3">
<div class="product">
<div class="text">
text text text
</div>
<div class="img-hide">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
<div class="text-hide">
this is text hide
</div>
</div>
</div>
<div class="col-md-3">
<div class="product">
<div class="text">
text text text
</div>
<div class="text-hide">
this is text hide
</div>
<div class="img-hide">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
</div>
</div>
<div class="col-md-3">
<div class="product">
<div class="text">
text text text
</div>
<div class="text-hide">
this is text hide
</div>
<div class="img-hide">
<img src="http://via.placeholder.com/350x150" alt="">
</div>
</div>
</div>
</div>
</div>
Подскажите, как реализовать такое?