I have a thumbnail that contains both an image and some text. When I hover over the image, it zooms in. Check out this demo here: https://jsfiddle.net/ShiroiOkami/r1awd3b4/
I am looking to achieve an effect where the image zooms in without changing its size. I do not want it to grow. How can I accomplish this?
Here is an example of the code:
<div class="wrapper">
<img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">
<div class="description">
<h3>
Some title
</h3>
<p>
some text
</p>
</div>
CSS:
.wrapper{
background-color: #fff;
text-align: center;
width: 150px;
overflow: hidden;
}
.grow{
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.grow:hover{
transform: scale(1.1);
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
}
.description{
background-color: #fff;
overflow: hidden;
}