image hover over and text inside the image

Question

.text {
position: absolute;
font-family: "courier new";
font-size:30px;
font-style: bold;
color: blue;
background-color:rgba(255,255,255,0.7);
width: 100%;
line-height:50px;
text-align: center;
z-index:10;
opacity: 0;
display:block;
height:100%;
overflow: hidden;
top:0; left:0;
 -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}


.text:hover {
opacity:1;
}

This is css for my hover over image and text appreance.

http://jsfiddle.net/LbLHc/

here is what i have. How do i put the text inside of my image when i hover over?

thank you

Answer 1

Here is solution for you problem.
Html Code
<div class="row">
 <div class="relative imgContainer">
  <a href="works/nytimes/nytimes.html">
   <span class="text">NY times magazine: Table of Contents</span>
   <img src="http://placehold.it/500x200" class="img-responsive" />
  </a>
 </div>
 <div class="relative imgContainer">
  <span class="text">Eloquence Magazine</span>
  <img src="http://placehold.it/700x500"class="img-responsive" />
 </div>
</div>
**Css Code**
.imgContainer:hover .text{
    display:block;
    opacity:1;
}
.relative{
    position: relative;
}
.imgContainer{
   height: 250px;
   width: 400px;
   margin-bottom: 20px;
}
img{
   height: 250px;
   width: 400px;
}
.text {
   position: absolute;
   font-family: "courier new";
   font-size:30px;
   font-style: bold;
   color: blue;
   background-color:rgba(255,255,255,0.7);
   display:none;
   width: 100%;
   height:100%;
   text-align: center;  
   top:0; left:0;
   -webkit-transition: all 0.5s ease;
   -moz-transition: all 0.5s ease;
   -o-transition: all 0.5s ease;
   transition: all 0.5s ease;
}


.text:hover {
    display:block;
    opacity:1;
}

FiddleLink http://jsfiddle.net/anu1718/Y2AYj/

Answer 2

If I understand it correctly, you want to hide the text by default, and only show it when hovering over the image. IF you want to use just simple CSS for that, you need to have a common container for the image and the text (the latter one being absolutely positioned and hidden), and add a CSS rule targeting the :hover state of the container to show the text.

In your code I added a class ( fadingtext ) to the container:

<div class="row">
    <div class="col-xs-4"> <a href="works/nytimes/nytimes.html">
          <span class="text">Title</span>
          <img src="http://placehold.it/500x200" class="img-responsive"/>
      </a>

    </div>
    <div class="col-xs-4 fadingtext"> <span class="text">Text that fades on hover</span>

        <img src="http://placehold.it/700x500" class="img-responsive" />
    </div>
</div>

And here is your CSS with the fixed selectors:

.fadingtext .text {
    position: absolute;
    font-family:"courier new";
    font-size:30px;
    font-style: bold;
    color: blue;
    background-color:rgba(255, 255, 255, 0.7);
    width: 100%;
    line-height:50px;
    text-align: center;
    z-index:10;
    opacity: 0;
    display:block;
    height:100%;
    overflow: hidden;
    top:0;
    left:0;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
.fadingtext:hover .text {
    opacity:1;
}

Here is a modified version of your jsfiddle:

http://jsfiddle.net/Rws85/2/