I want to create an effect where a caption div fades in directly over an image when the mouse enters the div and fades out when the mouse leaves. Additionally, I would like to implement a click toggleClass function to select and deselect the image. When the image is selected, the caption should remain visible. When the image is deselected with a click, the caption should fade out.
In summary: 1) Use mouse enter/leave to fade in/out the caption. 2) Implement click functionality to toggle the select class for displaying or hiding the caption.
To view the FiddleJS example, visit: http://jsfiddle.net/jhyqt5/cBsqN/
HTML:
<div class="caption">Into the Night</div>
<img src="https://scontent-a-pao.xx.fbcdn.net/hphotos-frc1/189612_10100244250167513_7332862_n.jpg" class="img-circle">
</div>
CSS:
.img-circle{
border-radius: 50%; height: 140px; width: 140px;
}
.caption{
background-color: black; opacity: .7;
text-align: center; line-height: 120px; color: white;
position: absolute; display: none;
border-radius: 50%; height: 140px; width: 140px;
}
JS:
$('.caption').mouseenter(function(){
var image = $(this).find('img'),
caption = $(this).find('div');
caption.height(image.height());
caption.width(image.width());
caption.fadeIn();
}).mouseleave(function(){
var image = $(this).find('img'),
caption = $(this).find('div');
caption.height(image.height());
caption.width(image.width());
caption.fadeOut();
});