Some days back I wrote a post regarding "Beautiful Thumbnail Hover Effect". On getting such a good response about the javascript effect I am again presenting a different thumbnail presentation.
This implementation is little different. To know more about this effect lets see the demo first.
If you have seen the demo then you might be wondering how this image is splitting in middle. Actually to get this effect I have used two instances of the same image. One instance goes toward left while second image goes right, in effect giving an illusion that image is splitting in middle.
Now lets move on to its implementation.
The HTML
Here i am given html code to showing one thumbnail:
<div class='thumb'> <div class='someContent'> <div class='content'>Some Random Text Over Here. </div> <div class='more'><a href="#">More »</a></div> </div> <div class='divLeft' style='left:0px'> <div class='divLeftImage' style='background:url(7.jpg);'></div> <div class='divLeftShadow'></div> </div> <div class='divRight' style='left:0px;background-image:url(7.jpg);'></div> <img class="thumbnail-shadow" alt="bottom" src="thumbnail-shadow.png"/> </div>
This code looks to me as self explanatory.
The CSS
div.thumb{ position:relative; width:160px; height:160px; margin:30px 40px; overflow:hidden; border:5px solid #313131; float:left; } div.divLeft, div.divRight{ width:90px; height:160px; overflow:hidden; position:relative; top:-160px; overflow:hidden; float:left; } div.divLeft{ margin-right:-10px; } div.divLeftImage{ width:80px; height:100%; float:left; } div.divLeftShadow{ width:10px; height:100%; float:left; background:transparent url('shadow.png') repeat-y 0 0; } div.divRight{ width:80px; background-position:-80px 0; } .thumbnail-shadow { float:left; height:33px; position:relative; top: -320px; width:100%; } div.someContent{ position:relative; width:160px; height:150px; padding:10px 0px 0px; font-size:12px; font-family:Arial; text-align:justify; background:transparent url(thumbnail-overlay.png) no-repeat scroll 0px -167px; } div.someContent div.content{ color:#CCC; height:126px; font-size:11px; padding:0 10px 0 20px; } div.someContent div.more{ background-image:url(readmore-bg.png); bottom:0; float:right; height:16px; padding:5px 5px 3px 20px; position:relative; right:0; width:45px; }
Javascript : Mootools
And Finally the magic of Mootools to get the desired effect. To get the desired effect I am moving div.divLeft 70px toward left, and moving div.divRight 80px toward right. At the same time the background image for the background text is coming down.
$$('div.thumb').each(function(div){ div.getElement('div.someContent').set('tween', {duration:'700'}); div.getElement('div.divLeft').set('tween', {duration: '450'}); div.getElement('div.divRight').set('tween', {duration: '450'}); div.addEvent('mouseenter',function(e){ this.getElement('div.divLeft').tween('left','-70px') this.getElement('div.divRight').tween('left','80px') this.getElement('div.someContent').tween("background-position", "-20px 0px"); }) div.addEvent('mouseleave',function(e){ this.getElement('div.divLeft').tween('left','0px') this.getElement('div.divRight').tween('left','0px') this.getElement('div.someContent').tween("background-position", "0px -167px"); }) })
The whole code is available for download :
Download Another_Thumbnail.zip
Hope you guys will like it. Let me hear your feedbacks through comments.
that is too cool…. really nice…keep it buddy….
It looks really bad in IE 6 & IE 7 x(
Thanks Andy for pointing out.
I have fixed the problem in IE6 and IE7.
The only problem remains is png transparency problem in IE6. Although I know there are few fixes available for this, but I leave it to the developer to use PNG Fix.
I’m still getting this issue in IE6 (Also on IE8 with IE7-Quirks mode)
[...] http://www.nitinh.com/2009/11/another-beautiful-thumbnail-hover-effect-using-mootools/ [...]
it won’t ‘slide’ all the way in explorer 8
Hi Elizabeth,
I think you are talking about part of image left on left side of the thumbnail.
Actually I have deliberately kept it like that.
Nice work. I really like the effect
[...] Link: http://www.nitinh.com/2009/11/another-beautiful-thumbnail-hover-effect-using-mootools/ [...]
Great hover effect, I’ll probably use this in one of my projects
[...] 3. Another Beautiful Thumbnail Hover Effect : Using Mootools [...]
Hi… thanks for this effect… but how can I change the height of the image?
[...] Another Beautiful Thumbnail Hover Effect : Using Mootools | The Code Dreamer [...]
Nice demo!!!…
Thanks for the information. I will come back and check your updates. Great Blog!
Very nice work Nitin, the effect is really awesome.
Hi
refreshing and very informative. meself wish there were more blogs like it. Anyway, meself felt it was about time meself posted, I
[...] Thumbnail Hover Effect Using Mootools Image is splitting in the middle using two instances of the same image. One instance goes toward [...]
[...] Thumbnail Hover Effect Using Mootools Image is splitting in the middle using two instances of the same image. One instance goes toward [...]
I’m still learning from you, while I’m making my way to the top as well. I definitely liked reading everything that is written on your blog.Keep the tips coming. I loved it!
Check source code of samples. From there you can figure out what all is required.
[...] Thumbnail Hover Effect Using Mootools Image is splitting in the middle using two instances of the same image. One instance goes toward [...]
[...] Thumbnail Hover Effect Using Mootools Image is splitting in the middle using two instances of the same image. One instance goes toward [...]
woww awesome demo…
the l-r roll out of the image is nicely done…
u just gave me a new idea for a CSS..will back to you soon ..
[...] 3. Another Beautiful Thumbnail Hover Effect : Using Mootools [...]
Um… Me too? haha