Текст на изображении Mouseover - CSS позиционирование

Question

Я использую этот код fork для отображения текста при наведении на изображение.

http://codepen.io/anon/pen/hxqoe

HTML

<img src="http://placekitten.com/150" alt="some text" /> 
<img src="http://placekitten.com/150" alt="more text" /> 
<img src="http://placekitten.com/150" alt="third text" /> 

<div id="text"></div> 

CSS

div { 
    display: none; 
    position: absolute; 
} 

img:hover + div { 
    display: block; 
} 

Jquery

$('img').hover(function() { 
    $('div').html($(this).attr('alt')).fadeIn(200); 
}, function() { 
    $('div').html(''); 
}); 

Ищу для div текста, d воспроизводится внутри каждого изображения вместо стационарного div.

Любые идеи?

Answer 1

Для этого вам не нужен jQuery. Его можно легко достичь с помощью чистого CSS.

В этом примере я использую псевдоэлемент :after для добавления содержимого из атрибута alt родителя div. Вы можете добавить любой стиль вы хотите ..

jsFiddle here - Обновлен включить замирание

HTML - довольно простой

<div alt="..."> 
    <img src="..."/> 
</div> 

CSS

div { 
    position: relative; 
    display: inline-block; 
} 

div:after { 
    content: attr(alt); 
    height: 100%; 
    background: rgba(0, 0, 0, .5); 
    border: 10px solid red; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    display: inline-block; 
    box-sizing: border-box; 
    text-align: center; 
    color: white; 
    padding: 12px; 
    font-size: 20px; 
    opacity: 0; 
    transition: 1s all; 
    -webkit-transition: 1s all; 
    -moz-transition: 1s all; 
} 

div:hover:after { 
    opacity: 1; 
} 

Answer 2

Изменение JavaScript к этому:

$('img').hover(function() { 
    $('div').html($(this).attr('alt')).fadeIn(200); 
    $('div').css('left',$(this).offset().left + 'px'); 
    $('div').css('top',$(this).offset().top + $(this).height() - 20 + 'px'); 
}, function() { 
    $('div').html(''); 
}); 

И это должно сделать трюк.

Answer 3

Я бы обернул ваши изображения в какой-то обертке, а затем использовал CSS для эффекта наведения (DEMO).

HTML:

<div class="img-wrapper"> 
    <img src="http://placekitten.com/150" alt="some text 1" /> 
    <div class="img-desc">some text 1</div> 
</div> 

CSS:

.img-wrapper { 
    position: relative; 
    display: inline; 
} 

.img-desc { 
    display: none; 
    position: absolute; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    background: #FFF; 
    opacity: 0.6; 
    padding: 5px; 
} 

.img-wrapper:hover .img-desc{ 
    display: block; 
} 

Я добавил альтернативное решение с дополнительным переходом к CSS демо.

Чтобы получить переход просто управлять видимостью с opacity:

.img-desc { 
    /*...*/ 
    opacity: 0; 
    /*...*/ 
} 

.img-wrapper:hover .img-desc{ 
    opacity: 0.6; 
    transition: opacity 0.4s ease-in; 
}