Cursor Over Image Zoom Out Effect

How do I create this effect; when cursor over an image and it slowly zooms out slightly, just like the site: https://www.psychologies.co.uk?

 

Just use jquery example
$("#image").hover(function(){$(this).css("transform", "scale(1.05)")})
or something similar but using jquery animate function.

 

Hi kertoon

You can create this effect through jquery hover effect. You can also go through - http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm

Let me know if you need any further help.
Regards
Vinika

 

It is just a hover effect!!! Why would anyone think of bloating a page to use and inefficient jquery method instead of just adding 2 lines to the stylesheet. What planet is this?

 

What are the two lines?

 

You can do this using CSS. Do not use jquery for something like that.

Here's the effect you're looking for: http://jsfiddle.net/27Syr/1206/

<div class="thumbnail">
    <div class="image">
        <img  src="http://placehold.it/320x240" alt="Some awesome text"/>
    </div>
</div>

Code (markup):

img {
    max-width: 100%;
    display: block;
}

.thumbnail {
    position: absolute;
    top: 50%;
    left: 50%;
   
    width: 320px;
    height: 240px;
   
    -webkit-transform: translate(-50%,-50%); /* Safari and Chrome */
    -moz-transform: translate(-50%,-50%); /* Firefox */
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -o-transform: translate(-50%,-50%); /* Opera */
    transform: translate(-50%,-50%);
}

.image {
    width: 100%;
    height: 100%;   
}

.image img {
    -webkit-transition: all 1s ease; /* Safari and Chrome */
      -moz-transition: all 1s ease; /* Firefox */
      -o-transition: all 1s ease; /* IE 9 */
      -ms-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);
}

Code (markup):

 

I'm not sure you need that much code if the image is already correctly mounted in the page but the key is
the
transform:scale(1.25);

I'm not sure I would still use the hyphen hacks. Chrome has full support since version 26 and Firefox since 16. Ie needs it for IE9 but it is bug ridden and you are better off to avoid it. Opera and Safari are hit and miss even with the -webkit hack. The -webkit version had a number of bugs the have come and gone across version but Chrome solved the reliability issues after forking to blink and eliminating the need for the hyphen hack.

Bottom line is if you drop the hyphen hacks it will work fine in modern mainstream browsers and I figure anyone using an old browser instead of downloading a free modern browser is probably to obtuse to appreciate most subtle effects like that anyway.

 

I agree with both of you. Css is enough.
I think this is more then enough for him, a lot of code can just be confusing.
#image:hover {
transform:scale(1.25);
}

 

Thank you for all your help.

 

I'd consider giving background-size a look. IE still wont' do transitions on them, but most everything else will.

.zoom {
  background-image:url(images/test.png) center center no-repeat;
  background-size:100% 100%;
 -webkit-transition:background-size 0.3s;
  transition:background-size 0.3s;
}

.zoom:hover {
  background-size:125% 125%;
}

Code (markup):

Untested, but would be the 'ideal'.

In that bloated train wreck of how NOT to build a website that was linked to by the OP with it's massive code bloat asshattery, those images are NOT content, as such they would have no damned business in the markup as a IMG tag. Hence if it's the same type of content and presentation as that site, an IMG tag is not the answer -- EVER.

 

Thank you.

 

ROTFLMAO... we certainly need the jquery bloat to make sure that the CSS works right... unbelievable

 

Wtf is that jQuery thing doing there? Why in the world would you need jQuery to add a class, when all you need to do is add a :hover-state in CSS?

 

Anyone can copy + paste from somewhere else:
http://stanhub.com/how-to-create-zoom-effect-on-image-hover-with-css-and-jquery/
Shame you have absolutely no understanding of what your copying.