Posted By admin
Tags: , ,
Thumbnail Caption Hover Effect
Demo

Thank you for the code.. clear and simple :),exelente…,hover effect is not working….what to do with that???,Hello, thank you for the code. A question, How can I wrap my thumbnail with a hyperlink()? Can’t find a solution. Thank you,Why need JavaScript? This can be done in pure CSS3, which I done for my project, thanks for your rgba color – I like it.,Actually, you don’t need “CSS3”, just plain CSS.Some hover and absolute positioning. All CSS3 would do is ease transition or animation, but functionality can be done with plain ol’ css :),Thanks! This was very helpful. Good work,Thanks.Awesome.,how to hover this effect for bottom as in this the hover is from top,Use it.,.thumbnail { position:relative; overflow:hidden;},.caption { position:absolute; bottom:0; right:0; background:rgba(66, 139, 202, 0.75); width:100%; height:100%; padding:2%; display: none; text-align:center; color:#fff !important; z-index:2;},//this is better to stop hover when u do very hover on it . $( document ).ready(function() { $(“[rel=’tooltip’]”).tooltip();, $(‘.thumbnail’).hover( function(){ $(this).find(‘.caption’).slideDown(300); //.fadeIn(250) }, function(){ $(this).find(‘.caption’).slideUp(300,function(){$ (this).stop( true, true )}); //.fadeOut(205) and stop hover } ); });,Love this effect. Is there a way to have the text and links at the bottom of the image instead of the top?,you would probably need to modify the top – margin for the .caption class . For example try setting it to 150px;,That didn’t work… but I added 100px of padding to the h4 title and it centered the text in the thumbnail.Thanks for your help!,you’re welcome!,not working ;(,what exactly is not working?,Thank you very much. It has helped me alot!,Thank you for this :),I have one problem though; I combined your code with this technique: http://untame.net/2013/05/h…but after the sorting the caption hover no longer works (it is gone). Any idea what could cause that and how to fix it?,thanks so much ..but this not working weel om col-sm ie when width =768 caption bg become larger than image..how can i fix this,Thanks so much!!!,very nice,Sweet! Thanks for sharing sevenx.de :),awsome,The author is sevenx.de

1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *