CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3555167
user3555167

Reputation: 11

image hover over and text inside the image

.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

Upvotes: 0

Views: 502

Answers (2)

Anuradha
Anuradha

Reputation: 169

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/

Upvotes: 1

Stefano Dalpiaz
Stefano Dalpiaz

Reputation: 1673

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/

Upvotes: 0

Related Questions