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?
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); }
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.
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.