Creating hover effects with CSS?

Question

I'm currently trying to create a zoom effect when I hover over one of my four images. The problem is that most examples usually use tables or masks to apply an effect.

Here is one example that implements what I would like this .

This is my code.

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

How about using the CSS3 transform property and using scale , which have a poor scaling effect, you can do this

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 is the fiddle demo. I removed part of the element to make it simpler, you can always add overflow hidden to .image to hide 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 top left corner */ margin-top: -50%; margin-left: -50%; } 

Sentence

Instead of .fader { inline-block; } .fader { inline-block; } consider the use of some mesh system. Based on your technology preferences, 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 to use the background image. It’s easier and more flexible for me:

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 add-on

Answer 5

 .item:hover img { -moz-transform: scale(1.3); -webkit-transform: scale(1.3); transform: scale(1.3); } 

this way you can scale any image with a simple animation. If you need a complete tutorial, there is an official tutorial here: http://talkerscode.com/webtricks/image-zoom-in-on-hover-using-css3.php

Answer 6

Simply:

 .grow { transition: all .2s ease-in-out; } 

This will allow the element to assign animation via css.

 .grow:hover { transform: scale(1.1); } 

It will make it grow!

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

  -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; 

I just want to make a note about the above transitions, I just need to

  -webkit-transition: all 1s ease; /* Safari and Chrome */ transition: all 1s ease; 

and -ms- of course, doenst work for IE 9, I don’t know where you got this idea.

Answer 9

  .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 for reduction only. Set the "img-wrap" div to suit your styles and insert the effect increase effect in the style above. For the zoom effect, you must increase the scale value (for example: to increase, use transform: scale (1.3);

Answer 10

  <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 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

Add the jQuery JavaScript library along with jquery.zbox.css and jquery.zbox.js to your web page.

 <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 full-size images on the web page.

 <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 a function on the finished document. What is it.

In the view source, do:

 $(".zb").zbox();