Zoom on background image in div on hover

Hi,

I have a dive with a background-image in it. When the user hovers over it I want to add some blur tot he image and zoom in on it slightly.

I have seen this effect on another wbesite but am failing to find it at the moment

I have tried using scale in the css but this enlarges the whole div. I would preferrably like to just zoom (enlarge and animate) the background image only retaining the div size.

Could anyone help me please?
flynnyAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
Adrian CrabtreeConnect With a Mentor Commented:
Sorry for the last response! If you have your markup like that, you can try this: http://jsfiddle.net/vCn25/4/.

What I did here was give the <img> a specific width and height, and once you hover over the wrapper the width and height of the <img> increases. I was able to center the image by using position absolute and then adjusting the margins and the left and top properties.
0
 
Adrian CrabtreeCommented:
Hi flynny,

I've set up an example using only CSS. You can view it here: http://jsfiddle.net/vCn25/3/.

If you go this route, it will not work for older browsers (IE8 and below). But as you can see, I set the background div within a wrapper. I did this so you could still have content within the wrapper without it getting blurred.
0
 
flynnyAuthor Commented:
Hi,

many thanks for that that would work brilliantly. However I ran into some problems.

Because I am trying to add this on a wordpress installation I want to create the divs with these effects dynamically.

The easiest way I saw to to this was

<div class="image-wrapper">
<img src="<?php echo get_post_meta($current_page->ID, 'thumb', true); ?>"/>	
</div>

Open in new window


with the following css

.image-wrapper {
    overflow: hidden;
    position: relative;
    height: 150px;
    width: 225px;
}

.image-wrapper img { 
	position:relative;
	z-index:0;
	margin-left: auto;
    	margin-right: auto;
    	-webkit-transition: all .5s ease-in-out;
       	-moz-transition: all .5s ease-in-out;
        -ms-transition: all .5s ease-in-out;
        -o-transition: all .5s ease-in-out;
        transition: all .5s ease-in-out;
}

.image-wrapper:hover img {

	width:300px;
	margin-left: auto;
	margin-right: auto;
    	-webkit-filter: blur(40px);
       	-moz-filter: blur(40px);
        -ms-filter: blur(40px);
        -o-filter: blur(40px);
}

Open in new window


however its not animating. My idea was to centre the image and then just increase the size.

The problem I am getting is that the image is just changing to the new size and is not being centered?
0
 
flynnyAuthor Commented:
perfect adrian many thanks for helping me out.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.