Текст наведите курсор на изображение

Question

Как я могу нарисовать текст над изображением? Я хочу, чтобы текстовое поле отображалось точно над местом расположения изображения, так что изображение исчезает полностью, а при выводе изображения снова появляется изображение. Я искал все, но я только нашел эффекты наведения с различным позиционированием hoverbox, из которого находится изображение ...

Answer 1

CSS:

.textHover { 
    display:none; 
    width:100%; 
    height:100%; 
    position:absolute; 
    top:0; left:0; 
    text-align:center; 
    color:white; 
} 
.imgContain { 
    position:relative; 
    display:table; 
} 
.imgContain:hover .textHover { 
    display:block; 
} 

разметки:

<div class="imgContain"> 
    <img src="http://placehold.it/300x200"/> 
    <div class="textHover">My text here</div> 
</div> 

http://jsfiddle.net/EACxV/

Answer 2

Не нужно использовать JavaScript, если только вы не нуждаетесь в плавном переходе, не полагаясь на CSS3. Если предположить, что изображение имеет фиксированные размеры, вы могли бы сделать что-то вроде этого:

<div> 
    <p>Text</p> 
    <img src="" alt="" width="100px" height="100px" /> 
</div> 

div { position:relative; z-index:1; height:100px; width:100px; } 
img { position:absolute; top:0; left:0; z-index:2; } 
div:hover img { display:none; } 

JSFiddle.

Answer 3

Вам не нужно код JavaScript, чтобы сделать это. В чистом html & css он будет работать хорошо. Ниже приведен пример с анимацией css с изменением непрозрачности.

HTML

 

    <div class="hvrbox"> 
     <img src="https://upload.wikimedia.org/wikipedia/commons/2/22/Bochnia_poland_saltmine.jpg" alt="Salt mine" class="hvrbox-layer_bottom"> 
     <div class="hvrbox-layer_top"> 
      <div class="hvrbox-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce porttitor ligula porttitor, lacinia sapien non.</div> 
     </div> 
    </div> 

CSS

 

    .hvrbox, 
    .hvrbox * { 
     box-sizing: border-box; 
    } 
    .hvrbox { 
     position: relative; 
     display: inline-block; 
     overflow: hidden; 
     max-width: 100%; 
     height: auto; 
    } 
    .hvrbox img { 
     max-width: 100%; 
    } 
    .hvrbox .hvrbox-layer_bottom { 
     display: block; 
    } 
    .hvrbox .hvrbox-layer_top { 
     opacity: 0; 
     position: absolute; 
     top: 0; 
     left: 0; 
     right: 0; 
     bottom: 0; 
     width: 100%; 
     height: 100%; 
     background: rgba(0, 0, 0, 0.6); 
     color: #fff; 
     padding: 15px; 
     -moz-transition: all 0.4s ease-in-out 0s; 
     -webkit-transition: all 0.4s ease-in-out 0s; 
     -ms-transition: all 0.4s ease-in-out 0s; 
     transition: all 0.4s ease-in-out 0s; 
    } 
    .hvrbox:hover .hvrbox-layer_top, 
    .hvrbox.active .hvrbox-layer_top { 
     opacity: 1; 
    } 
    .hvrbox .hvrbox-text { 
     text-align: center; 
     font-size: 18px; 
     display: inline-block; 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     -moz-transform: translate(-50%, -50%); 
     -webkit-transform: translate(-50%, -50%); 
     -ms-transform: translate(-50%, -50%); 
     transform: translate(-50%, -50%); 
    } 
    .hvrbox .hvrbox-text_mobile { 
     font-size: 15px; 
     border-top: 1px solid rgb(179, 179, 179); /* for old browsers */ 
     border-top: 1px solid rgba(179, 179, 179, 0.7); 
     margin-top: 5px; 
     padding-top: 2px; 
     display: none; 
    } 
    .hvrbox.active .hvrbox-text_mobile { 
     display: block; 
    } 

Я описал его со многими подобными примерами (с лучшей анимацией) здесь http://goo.gl/EECjCm