Papermashup

Subscribe


Tweets


"@KBedders @elerichardson I'm Free!!!!!! Call / Whatsapp me!!!"

@ashleyford 2 weeks ago

"@KBedders moomin!"

@ashleyford 2 weeks ago

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

jQuery image zoom effect

AshleyAshley

I recently revamped my portfolio as it was looking dreary and completely uninspiring, I wanted to present my work in a way that was both easy to navigate, easy to maintain and most importantly looked smart and un-cluttered. When I was brainstorming for ideas, I initially thought I would break up my portfolio into categories to make it both easier to navigate and more structured in presentation. After much consideration I completely scrapped categories and decided on the simpler approach of having large thumbnails with a brief sentence of text on hover.

So today I’m going to run through the technique used to zoom the image thumbnails and display the overlay of text. You can see my portfolio here which is a good demo of what we’re creating of you can see the dedicated demonstration here

jquery-thumbs

The HTML

There are two DIV’s that make up the construction of each element, we first have out .item div which is the container for our image and caption. Directly inside the ‘item’ div we have the image with the ‘caption’ div directly below that with a link and paragraph tag inside. take a look at the code and image structure below to see the construction of the div elements.

structure


   <div class="item"><img src="http://papermashup.com/wp-content/themes/arthemia/portfolio/images/jennifer.jpg" height="271" width="304" />
      <div class="caption"><a href="http://jenniferjohnston.tv">Jennifer Johnston</a>
        <p>Scottish voiceover Jennifer Johnston. Branding, site design and development</p>
      </div>
    </div>

The CSS


.item {
	width:304px;
	height:271px;
	border:4px solid #333;
	margin:30px 12px 10px 5px;
	overflow:hidden;
	position:relative;
	float:left;
}
.item .caption {
	width:304px;
	height:71px;
	bottom:0;
	color:#fff;
	background:#000;
	font-weight:700;
	position:absolute;
	left:0;
	display:none;
	filter:alpha(opacity=82); 
	-moz-opacity:0.9;
	opacity: 0.9; 
}
.item .caption a {
	text-decoration:none;
	color:#0cc7dd;
	font-size:17px;
	letter-spacing:-1px;
	font-family:Arial, Helvetica, sans-serif;
	padding:5px;
	display:block;
}
.item .caption p {
	padding:5px;
	margin:0;
	color:#fff;
	line-height:15px;
	font-size:12px;
}
.item img {
	border:0;
	position:absolute;
}

The JavaScript

You can see that we’re setting two variables, ‘zoom’ and ‘move’. Notice that instead of declaring var again in front the variable ‘move’ i’ve omitted it. This is because if we’re setting multiple variables with jQuery you don’t need to add var each time, the values are almost chained.

The next steps are that we setup a .hover function that when triggered will animate the image width and height to give the impression that the image is zooming out, we’re also animating the caption to fade in and out on hover.


$(document).ready(function() {

        var zoom = 1.1
              move = -15;
	
	$('.item').hover(function() {
		
		width = $('.item').width() * zoom;
		height = $('.item').height() * zoom;
	
		$(this).find('img').stop(false,true).animate({'width':width, 'height':height, 'top':move, 'left':move}, {duration:300});
		$(this).find('div.caption').stop(false,true).fadeIn(300);
	},
	function() {

		$(this).find('img').stop(false,true).animate({'width':$('.item').width(), 'height':$('.item').height(), 'top':'0', 'left':'0'}, {duration:300});	
		$(this).find('div.caption').stop(false,true).fadeOut(400);
	});

});

demodownload

Designer and web developer, Co-founder and Technical Director at Harkable.com. Previously I worked at Spotify, MySpace and InMobi. Contact me - ashley[at]papermashup.com

Comments 25
  • fafa
    Posted on

    fafa fafa

    Reply Author

    Here you will find free scripts with demonstration
    http://55points.blogspot.com/


  • B
    Posted on

    B B

    Reply Author

    Thank you for sharing your work with us.


  • JAYKAY
    Posted on

    JAYKAY JAYKAY

    Reply Author

    Thanks for sharing! Its a nice effect.


  • charlescuellar
    Posted on

    charlescuellar charlescuellar

    Reply Author

    uy excelente jquery thanks


  • randsco
    Posted on

    randsco randsco

    Reply Author

    This article is misnamed, as there’s no real “zoom” effect. A better title would be, “Nifty jQuery Caption Zoom”.

    However, let me submit a pure-CSS Image-caption zoom, which IS both an image zoom and a caption zoom (with the added benefit of not requiring or relying on jQuery or JavaScript – i.e., everyone gets to see it.

    Developed by me five years ago. Just as relevant today as it was then.

    Cheers,
    -stk


  • PSDgator
    Posted on

    PSDgator PSDgator

    Reply Author

    I think semantically it will be better if a set of DL/DT might be used. Any other thoughts expect DIVs?


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @PSDgator, I guess your right. a definition list would certainly make sense.


  • Mia
    Posted on

    Mia Mia

    Reply Author

    This is def one of the best zoom effects Ive seen – its very smooth , and I like the fact of the thumbs being larger than the standard 150×150- however the zoom effect is simply awesome . Great work ! 😀


  • Giancarlo
    Posted on

    Giancarlo Giancarlo

    Reply Author

    Congratulations. This is a wonderful effect library!


  • rodman
    Posted on

    rodman rodman

    Reply Author

    wow, cool looking zoom effect. i will sure use it on my site


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @rodman glad to hear you found it useful, thanks


  • Josh
    Posted on

    Josh Josh

    Reply Author

    I’m doing something a little different with jQuery zoom in my WordPress plugin for getting images from flickr. It really works out nice.


  • Brecht
    Posted on

    Brecht Brecht

    Reply Author

    Wow, I love it!
    Thanks for sharing another great jQuery tutorial


  • digitalbart
    Posted on

    digitalbart digitalbart

    Reply Author

    Subtle but Nice effect, like it!


  • Webstandard-Team
    Posted on

    Webstandard-Team Webstandard-Team

    Reply Author

    Very nice effect, did you try it with a definition list too? No use of div.item, div.caption and p! Just dl, dt and dd!


    • Ashley
      Posted on

      Ashley Ashley

      Reply Author

      @Webstandard-Team i haven’t tried it with a definition list but i can’t see any reason why it wouldn’t work.


  • Davinder
    Posted on

    Davinder Davinder

    Reply Author

    Thank you soo much!


  • Brian Jones
    Posted on

    Brian Jones Brian Jones

    Reply Author

    Nice little effect – thank you for sharing!