Как написать текст на изображении.

Question

Как добавить ТЕКСТ на изображение ... так, чтобы ТЕКСТ был доступен только для просмотра, когда изображение становится темным, когда мышь находится над ним .. что-то вроде .., приведенного в примере ниже, ... Спасибо за вашу помощь.

.image { 
 
    width: 250px; 
 
    height: 200px; 
 
    background: black; 
 
    position: relative; 
 
    overflow: hidden; 
 
} 
 
.image img { 
 
    transition: all ease 1s; 
 
} 
 
.image:hover img { /* Darkening effect on mouseover */ 
 
    background: black; 
 
    opacity: 0.7; 
 
} 
 
.image .arrow { /* Creates a half triangle with top and left arrow transparent */ 
 
    opacity: 0; 
 
    border-color: transparent #f2f2f2 #f2f2f2 transparent; 
 
    transition: all ease 1s; 
 
    position: relative; 
 
} 
 
.image:hover .arrow { /* Mouseover effect */ 
 
    opacity: 1; 
 
    font-family: Roboto; 
 
    font-size: 36px; 
 
    text-align: center; 
 
    border-image: none; 
 
    border-style: solid; 
 
    border-width: 45px; 
 
    position: absolute; 
 
    bottom: 0; 
 
    font-weight: normal; 
 
    width: 0; 
 
    height: 0; 
 
    right: 0; 
 
} 
 

 

 
.image:hover .arrow { 
 
    border-image: none; 
 
    border-style: solid; 
 
    border-width: 45px; 
 
    bottom: 0; 
 
    display: block; 
 
    font-family: Roboto; 
 
    font-size: 36px; 
 
    font-weight: normal; 
 
    height: 0; 
 
    opacity: 1; 
 
    position: absolute; 
 
    right: 0; 
 
    text-align: center; 
 
    width: 0; 
 
} 
 
.image .arrow { 
 
    border-color: transparent #f2f2f2 #f2f2f2 transparent; 
 
    opacity: 0; 
 
    position: relative; 
 
    transition: all 1s ease 0s; 
 
} 
 

 
.image .arrow span { 
 
    left: 5px; 
 
    position: relative; 
 
    top: -10px; 
 
}

<div class="image"> 
 
    <img src="http://lorempixel.com/250/200/sports" /> 
 
    <div class="arrow"><span>></span></div> 
 
</div>

enter image description here

Answer 1

Это просто. Создайте текст внутри вашего обертки div, затем закажите текст, отображаемый при зависании обертки. Ниже приведена демо-версия этой логики.

HTML-:

<div class="image"> 
    <p>I'm some very interesting text!</p> 
    <div class="arrow"><span>></span></div> 
</div> 

CSS-:

p{ 
    color: #fff; 
    opacity: 0; 
    font-weight: bold; 
    text-align: center; 
    font-size:32px; 
    color: red; 
    /* bring your own prefixes */ 
    transform: translate(0, 50%); 
    transition: all .5 ease; 
} 


.image:hover p { 
    visibility: visible; 
    opacity: 1; 
} 

CODEPEN DEMO

Answer 2

я думаю, что вы можете создать как этот вам нужно изменить положение класса .image, так что текст div может отображаться на этом перекрытии

.image-hover-wrapper { 
 
    display:none; 
 
    text-align: center; 
 
    width: 250px; 
 
    color: red; 
 
    font-size: 35px; 
 
    position: relative; 
 
    top: -125px; 
 
    background: rgba(255,255,255,0.6); 
 
} 
 
.image:hover > .image-hover-wrapper{ 
 
    display:block; 
 
    opacity:0.8;  
 
    transition-property: animation; 
 
    transition-duration: 2s; 
 
    transition-timing-function: linear; 
 
}

<div class="image"> 
 
    <img src="http://lorempixel.com/250/200/sports" /> 
 
    <div class="arrow"><span></span></div> 
 
    <div class="image-hover-wrapper"> 
 
     Hii 
 
    </div> 
 
</div>

и вот Updated DEmo