Zoom in on hover image and keep same size
12,328
Solution 1
It appears that you are trying to scale the image which is fine but to restrict what is actually seen requires that the image be scaled within a container.
Then when the image is scaled, the container will hide anything that would normally "spill out" if you didn't hide the overlflow.
So, like this:
.imgBox { /* now a container for the image */
display: inline-block; /* shrink wrap to image */
overflow: hidden; /* hide the excess */
}
.imgBox img {
display: block; /* no whitespace */
transition: .3s ease-in-out;
}
.imgBox:hover img {
transform: scale(1.3);
}
<div class="large-3 medium-6 small-12 columns">
<h2>Heading 1</h2>
<div class="imgBox">
<img src="http://lorempixel.com/image_output/food-q-c-300-200-9.jpg" />
</div>
<p>Paragraph here</p>
</div>
Solution 2
Paulie is right for sure but there also one more way you can use background-image
instead of img
tag
.imageWrapper{
background-image:url("http://techmadeplain.com/img/2014/300x200.png");
width:300px;
height:200px;
background-size:100%;
background-position: center center;
transition: .3s ease-in-out;
}
.imageWrapper:hover{
background-size:130%;
}
<div class="large-3 medium-6 small-12 columns">
<h2>Heading 1</h2>
<div class='imageWrapper'>
</div>
<p>Paragraph here</p>
</div>
Author by
Admin
Updated on June 19, 2022Comments
-
Admin almost 2 years
I am trying to have the hover zoom feature for my website, however, I have seen other examples and my code seems to be the same, however the dimensions of the image doesn't stay the same. Any ideas what could be the problem?
.imgBox { display: inline-block; overflow: hidden !important; transition: .3s ease-in-out }
.imgBox { display: inline-block; overflow: hidden !important; transition: .3s ease-in-out } .imgBox:hover { opacity: 0.6; filter: alpha(opacity=30); transform: scale(1.3); }
<div class="large-3 medium-6 small-12 columns"> <h2>Heading 1</h2> <img class="imgBox" src="http://techmadeplain.com/img/2014/300x200.png" /> <p>Paragraph here</p> </div>