How to make text appear on top of the image when hovering?
Question by qwr qwr
When a mouse hovering over the image, the image will be blurred and there will be text showing up on top of the image. I tried it myself using the code below but it appeared that the “text” move outside the image when hovering
…can anyone tell me why?
Code:
Html:
<span class ="row_1">
<a href="#">
<div class = "caption"> testing </div>
<img class = "img_link" src="image/food/food1.jpg" />
</a>
</span>
CSS:
.caption
{
display: none;
}
Jquery:
$('a').hover(
function(){
var image = $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeIn();
},
function(){
var image= $(this).find('img'),
caption = $(this).find('div');
caption.width(image.width());
caption.height(image.height());
caption.fadeOut();
});
Answer by David Thomas
First off, I had to correct your HTML. A div (block-level element) is not a valid child of either a span or a elements (both of which are in-line elements). So, amended your HTML to the following:
<span class="row_1">
<a href="#">
<span class="caption">testing</span>
<img class="img_link" src="http://davidrhysthomas.co.uk/img/dexter.png" />
</a>
</span>
That said, I’d suggest, if possible, using plain CSS for this:
a {
display: inline-block;
position: relative;
}
.caption {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #333; /* for browsers that don't understand rgba() notation */
background-color: rgba(0,0,0,0.6);
color: #f90;
font-weight: bold;
line-height: 1.1em;
}
a:hover .caption {
display: block;
}
You can, with CSS3 transitions, even implement the fade-in transition as well (which gracefully degrades for those browsers that don’t understand/implement transitions, albeit in this example you might have to use a Microsoft proprietary filter for older-IE compliance):
a {
display: inline-block;
position: relative;
}
.caption {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
background-color: #333; /* for browsers that don't understand rgba() notation */
background-color: rgba(0,0,0,0.6);
color: #f90;
font-weight: bold;
line-height: 1.1em;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
a:hover .caption {
opacity: 1;
-webkit-transition: all 1s linear;
-o-transition: all 1s linear;
-ms-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
If you must use jQuery then I’d suggest keeping it very, very simple:
$('.row_1 a').hover(
function(){
$(this).find('.caption').fadeIn(1000);
},
function(){
$(this).find('.caption').fadeOut(1000);
});
References:
