Creating a Zoom Effect on an image on hover using CSS? - html

Question

I'm currently trying to create a zoom effect on hover over one of my four images. The problem is most examples usually use tables or mask divs to apply some sort of effect.
Here's one example that implements what I would like this.
This is my code so far.
HTML
<div id="menu">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
<img class ="music" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
<img class ="bio" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</div>
CSS
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
#menu img {
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
overflow: hidden;
}
.blog {
height: 375px;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.blog:hover {
cursor: pointer;
height:475px;
width: 350px;
}
.music {
height: 375px;
}
.projects {
height: 375px;
}
.bio {
height: 375px;
}

Answer 1

What about using CSS3 transform property and use scale which ill give a zoom like effect, this can be done like so,
HTML
<div class="thumbnail">
<div class="image">
<img src="http://placehold.it/320x240" alt="Some awesome text"/>
</div>
</div>
CSS
.thumbnail {
width: 320px;
height: 240px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
}
.image:hover img {
-webkit-transform:scale(1.25); /* Safari and Chrome */
-moz-transform:scale(1.25); /* Firefox */
-ms-transform:scale(1.25); /* IE 9 */
-o-transform:scale(1.25); /* Opera */
transform:scale(1.25);
}
Here's a demo fiddle. I removed some of the element to make it simpler, you can always add overflow hidden to the .image to hide the overflow of the scaled image.
zoom property only works in IE

Answer 2

Here you go.
Demo
http://jsfiddle.net/27Syr/4/
HTML
<div id="menu">
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/il7hbk7i1/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/4st2fxgqh/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="projects" src="http://s18.postimg.org/sxtrxn115/image.png" alt="">
</a>
</div>
<div class="fader">
<div class="text">
<p>Yay!</p>
</div>
<a href="http://stackoverflow.com/questions/15732643/jquery-masonry-and-css3/">
<img class ="blog" src="http://s18.postimg.org/5xn4lb37d/image.png" alt="">
</a>
</div>
</div>
CSS
#menu {
text-align: center; }
.fader {
/* Giving equal sizes to each element */
width: 250px;
height: 375px;
/* Positioning elements in lines */
display: inline-block;
/* This is necessary for position:absolute to work as desired */
position: relative;
/* Preventing zoomed images to grow outside their elements */
overflow: hidden; }
.fader img {
/* Stretching the images to fill whole elements */
width: 100%;
height: 100%;
/* Preventing blank space below the image */
line-height: 0;
/* A one-second transition was to disturbing for me */
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease; }
.fader img:hover {
/* Making images appear bigger and transparent on mouseover */
opacity: 0.5;
width: 120%;
height: 120%; }
.fader .text {
/* Placing text behind images */
z-index: -10;
/* Positioning text top-left conrner in the middle of elements */
position: absolute;
top: 50%;
left: 50%; }
.fader .text p {
/* Positioning text contents 50% left and top relative
to text container's top left corner */
margin-top: -50%;
margin-left: -50%; }
Suggestion
Instead of .fader { inline-block; } consider using some grid system. Based on your technology of preference, you can go Foundation, Susy, Masonry or their alternatives.

Answer 3

.aku {
transition: all .2s ease-in-out;
}
.aku:hover {
transform: scale(1.1);
}

Answer 4

I like using a background image. I find it easier and more flexible:
DEMO
CSS:
#menu {
max-width: 1200px;
text-align: center;
margin: auto;
}
.zoomimg {
display: inline-block;
width: 250px;
height: 375px;
padding: 0px 5px 0px 5px;
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center center;
transition: all .5s ease;
}
.zoomimg:hover {
cursor: pointer;
background-size: 150% 150%;
}
.blog {
background-image: url(http://s18.postimg.org/il7hbk7i1/image.png);
}
.music {
background-image: url(http://s18.postimg.org/4st2fxgqh/image.png);
}
.projects {
background-image: url(http://s18.postimg.org/sxtrxn115/image.png);
}
.bio {
background-image: url(http://s18.postimg.org/5xn4lb37d/image.png);
}
HTML:
<div id="menu">
<div class="blog zoomimg"></div>
<div class="music zoomimg"></div>
<div class="projects zoomimg"></div>
<div class="bio zoomimg"></div>
</div>
DEMO 2 with Overlay

Answer 5

Simply:
.grow { transition: all .2s ease-in-out; }
This will allow the element to assign an animation via css.
.grow:hover { transform: scale(1.1); }
This will make it grow!

Answer 6

.item:hover img
{
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
}
this way you can zoom any image with simple animation. If you need a complete tutorial here is a official tutorial: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Answer 7

SOLUTION 1: You can download zoom-master.
SOLUTION 2: Go to here .
SOLUTION 3: Your own codes
.hover-zoom {
-moz-transition:all 0.3s;
-webkit-transition:all 0.3s;
transition:all 0.3s
}
.hover-zoom:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.5)
}
<img class="hover-zoom" src="https://i.stack.imgur.com/ewRqh.jpg"
width="100px"/>

Answer 8

<div class="item">
<img src="yamahdi1.jpg" alt="pepsi" width="50" height="58">
<img src="yamahdi.jpg" alt="pepsi" width="50" height="58">
<div class="item-overlay top"></div>
css:
.item img {
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.item img:hover {
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
transform: scale(1.1);
}

Answer 9

-webkit-transition: all 1s ease; /* Safari and Chrome */
-moz-transition: all 1s ease; /* Firefox */
-ms-transition: all 1s ease; /* IE 9 */
-o-transition: all 1s ease; /* Opera */
transition: all 1s ease;
just want to make a note on the above transitions only need
-webkit-transition: all 1s ease; /* Safari and Chrome */
transition: all 1s ease;
and -ms- certainly doenst work for IE 9 i dont know where you got that idea from.

Answer 10

.img-wrap:hover img {
transform: scale(0.8);
}
.img-wrap img {
display: block;
transition: all 0.3s ease 0s;
width: 100%;
}
<div class="img-wrap">
<img src="http://www.sampleimages/images.jpg"/> // Your image
</div>
This code is only for zoom-out effect.Set the div "img-wrap" according to your styles and insert the above style results zoom-out effect.For zoom-in effect you must increase the scale value(eg: for zoom-in,use
transform: scale(1.3);

Answer 11

#import url('https://fonts.googleapis.com/css?family=Muli:200,300,400,700&subset=latin-ext');
body{ font-family: 'Muli', sans-serif; color:white;}
#lists {
width: 350px;
height: 460px;
overflow: hidden;
background-color:#222222;
padding:0px;
float:left;
margin: 10px;
}
.listimg {
width: 100%;
height: 220px;
overflow: hidden;
float: left;
}
#lists .listimg img {
width: 350px;
height: 220px;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
#lists:hover{cursor: pointer;}
#lists:hover > .listimg img {
-moz-transform: scale(1.3);
-webkit-transform: scale(1.3);
transform: scale(1.3);
-webkit-filter: blur(5px);
filter: blur(5px);
}
#lists h1{margin:20px; display:inline-block; margin-bottom:0px; }
#lists p{margin:20px;}
.listdetail{ text-align:right; font-weight:200; padding-top:6px;padding-bottom:6px;}
<div id="lists">
<div class="listimg">
<img src="https://lh3.googleusercontent.com/WeEw5I-wk2UO-y0u3Wsv8MxprCJjxTyTzvwdEc9pcdTsZVj_yK5thdtXNDKoZcUOHlegFhx7=w1920-h914-rw">
</div>
<div class="listtext">
<h1>Eyes Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>Click for More Details...</p>
</div>
</div>
<div id="lists">
<div class="listimg">
<img src="https://lh4.googleusercontent.com/fqK7aQ7auobK_NyXRYCsL9SOpVj6SoYqVlgbOENw6IqQvEWzym_3988798NlkGDzu0MWnR-7nxIhj7g=w1920-h870-rw">
</div>
<div class="listtext">
<h1>Two Frogs Lorem Impsum Samet</h1>
<p>Impsum Samet Lorem</p>
</div>
<div class="listdetail">
<p>More Details...</p>
</div>
</div>

Answer 12

<!DOCTYPE html>
<html>
<head>
<style>
.zoom {
overflow: hidden;
}
.zoom img {
transition: transform .5s ease;
}
.zoom:hover img {
transform: scale(1.5);
}
</style>
</head>
<body>
<h1>Image Zoom On Hover</h1>
<div class="zoom">
<img src="/image-path-url" alt="">
</div>
</body>
</html>

Answer 13

Add jQuery JavaScript library together with the jquery.zbox.css and jquery.zbox.js to your webpage.
<link rel="stylesheet" href="jquery.zbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.zbox.min.js"></script>
Add a group of thumbnails with links pointing to the full sized images into the webpage.
<a class="zb" rel="group" href="1.png" title="Image 1">
<img src="thumb1.png">
</a>
<a class="zb" rel="group" href="2.png" title="Image 2">
<img src="thumb2.png">
</a>
<a class="zb" rel="group" href="3.png" title="Image 3">
<img src="thumb3.png">
</a>
Call the function on document ready. That's it.
In the view source do:
$(".zb").zbox();