CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Joseph Zammit
Joseph Zammit

Reputation: 373

Zooming on hover

I have an image with a color overlay and i want to add a zooming on the image when user hover over the image.
I'm trying to achieve this without JQuery but to get the result I don't mind using JQuery.

Thanks in advance

Jsfiddle

HTML:

<div class="rss-output">
<div class="body"> <a target="_blank" href="#">
<div class="overlay-feed"></div>
<div class="imagefix zooming" style="float:none;">
<img src="http://www.gettyimages.co.uk/CMS/StaticContent/1391099215267_hero2.jpg" alt="" height="337" width="600"/></a>
</div>
</div>     
</div>

CSS:

div.rss-output {
float: left;
width: 33.333%;
position: relative;
padding: 15px !important;
overflow: hidden;
}

.rss-output .body {
width: 100%;
position: relative;
}

.rss-output .overlay-feed {
background: #000 none repeat scroll 0% 0%;
z-index: 2;
position: absolute;
width: 100%;
height: 200px;
opacity: 0.5;
}

div.imagefix {
height: 200px;
line-height: 250px;
overflow: hidden;
text-align: center;
width: 100%;
}

div.imagefix img {
margin: -50%;
}

Upvotes: 1

Views: 152

Answers (3)

FRP7
FRP7

Reputation: 81

You can use css, for example:

.zoom_img img:hover{
-moz-transform:scale(2); 
-webkit-transform:scale(2);
-o-transform:scale(2);
}

Upvotes: 0

Alessio
Alessio

Reputation: 3610

The solution proposed by Ketan is good, but I would add an animation, to make the zoom smoother:

For example:

transition: all 1s cubic-bezier(0.23,1,0.32,1);

See updated fiddle (forked from ketan's one): http://jsfiddle.net/alessiozuccotti/84n3hu6v/2/

Or you could change the timing function you prefer. This link may help you: http://www.w3schools.com/cssref/css3_pr_animation-timing-function.asp

Upvotes: 0

ketan
ketan

Reputation: 19341

Use following css will do zoom effect:

.overlay-feed:hover + div.imagefix img{
    transform: scale(2);
    -webkit-transform: -webkit-scale(2);
}

Check your updated Fiddle

Upvotes: 4

Related Questions