Слайд-текст над изображением при наведении

Question

Я пытаюсь добавить эффект наведения CSS3 к некоторым изображениям, чтобы, когда кто-то нависает над изображением, какой-то текст будет скользить на белом фоне. Я пробовал несколько руководств, но я думаю, что они столкнулись с другим кодом, который у меня есть (поскольку я также накладываю текст и «новый» знак в углу.

Вот мой код, чтобы вы могли видеть (включая встроенные стили)

<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;"> 
 
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;"> 
 
    <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png"> 
 
</div> 
 
<div style="position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); text-align: center;"> 
 
    <p style="display: inline-block; background: rgba(0, 0, 0, 0.35); font-family: 'Amatic SC'; color: #FFF; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;"> 
 
    Brean Sands 
 
    </p> 
 
</div>

Answer 1

Это может помочь.

.img { 
 
    position: relative; 
 
    border: 10px solid #f00; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    cursor: pointer; 
 
    margin: 10px; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    transition: all .5s; 
 
    overflow: hidden; 
 
    height: 0; 
 
    background: white; 
 
    text-align: center; 
 
    font-size: 50px; 
 
} 
 
.img:hover .overlay, 
 
.overlay:hover { 
 
    height: 100%; 
 
    background: white; 
 
} 
 
.img > img { 
 
    display: block; 
 
}

<div class="img"> 
 
    <img src="http://www.placehold.it/300/eee" /> 
 
    <div class="overlay">Hello!</div> 
 
</div> 
 
<div class="img"> 
 
    <img src="http://www.placehold.it/400/eee" /> 
 
    <div class="overlay">Bye!</div> 
 
</div>

Answer 2

Я бы не рекомендовал не используя JavaScript для этого, если необходимо, так как если я правильно читать ваш вопрос, это может быть сделано в CSS Вот пример. - Я бы рекомендовал рефакторинга все ваши встроенные стили в тег стиля, иначе реорганизуйте новые стили в существующие встроенные стили, если вам нужны все ваши стили, чтобы быть встроенными.

#container:hover #name { 
 
    transform: translate(0, 0) !important; 
 
} 
 

 
#container #name { 
 
    transition: transform 0.25s ease; 
 
    transform: translate(0, 100%) !important; 
 
} 
 

 
#container { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 

 
#name { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: rgba(255,255,255,0.5); 
 
}

<div id="container"> 
 
<img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/penguin-test.jpg" style="width: 100%;"> 
 
<div style="display: inline-block; position: absolute; top: -11px; right: -11px;"> 
 
    <img src="http://stuartgreen.me.uk/pontins/wp-content/uploads/2015/07/new-posts.png"> 
 
</div> 
 
<div id="name" style="position: absolute; left: 0; right: 0; top: 0; bottom: 0; text-align: center;"> 
 
    <p style="display: inline-block; font-family: 'Amatic SC'; color: #333; text-shadow: 2px 2px 2px #3a3c3d; margin: 0; padding: 10px; font-size: 38px; line-height: 38px;">Brean Sands</p> 
 
    <p>A description</p> 
 
</div> 
 
</div>