Как сделать чтобы при hover на картинку она затемнялась и появлялся текст внутри нее?
Весь интернет перерыл не нашел ничего толкового. Смысл прост: при наведении мышью на картинку она должна затемняться чуть-чуть. и внутри блока-картинки появлялся текст. Прошу помочь.
1 ответов
код примерно будет такой :
jQuery(function(){
$('img').hover(function(){
var $parent = $(this).parent();
$parent.append(function(){
return $('<div/>')
.addClass('hover-div')
.css({
height: $parent.height()
, 'background-color': 'rgba(0,0,0, 0.4)'
}).text('some text')
});
}, function () {
var $parent = $(this).parent();
$parent.find('.hover-div').remove()
})
});
$('img').hover(function(){
var $parent = $(this).parent();
$parent.append(function(){
return $('<div/>')
.addClass('hover-div')
.css({
height: $parent.height()
, 'background-color': 'rgba(0,0,0, 0.4)'
}).text('some text')
});
}, function () {
var $parent = $(this).parent();
$parent.find('.hover-div').remove()
})
});