Hello, thank you for the code. A question, How can I wrap my thumbnail with a hyperlink()? Can't find a solution. Thank you
Daniel Vasile () - 9 years ago - Reply 0
Why need JavaScript? This can be done in pure CSS3, which I done for my project, thanks for your rgba color - I like it.
AngularJS WebDesigner () - 9 years ago - Reply 0
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 :)
Lauhakari [mikko] () - 9 years ago - Reply 0
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;
}
rajeshdoot () - 9 years ago - Reply 0
//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
}
);
});
Ali Zamani () - 10 years ago - Reply 0
Love this effect. Is there a way to have the text and links at the bottom of the image instead of the top?
Linda Smith () - 10 years ago - Reply 0
you would probably need to modify the top - margin for the .caption class . For example try setting it to 150px;
maxsurguy () - 10 years ago - Reply 0
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!
Linda Smith () - 10 years ago - Reply 0
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?
Blaze () - 10 years ago - Reply 0
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
Aml Mhmod () - 10 years ago - Reply 0
