How to write Text on a image. - html

Question

How to add TEXT in the image...so that the TEXT is view-able only when the image becomes dark when mouse is placed over it.. something like ..the one given in the example image below...
Thanks for your help.
.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

It's simple. Create some text inside your wrapper div, then order the text to display on hovering the wrapper. Below is a demo of this logic.
The HTML:
<div class="image">
<p>I'm some very interesting text!</p>
<div class="arrow"><span>></span></div>
</div>
The 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

i think you can create like this
you need to change the position of the .image class so that text div can appear overlap on that
.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>
and here is the
Updated DEmo