CODEWITHSUNDEEP
cssoverflow
Xavier
Xavier

Reputation: 4017

Create a text overflow on a image

I want to have a nice hover effect on some image i made. I want to display a text when the mouse is hover the image. I can get the text working but i would like to have a backgroud to make it more readable.

here is the HTML :

<div class="portfolio-frame">
  <div class="portfolio-overflow-hidden">                                                   
    <img width="420" height="236" src="http://benjaminbinauld.lfdb.fr/files/2013/03/mire-servitel16-9.jpg"  />
    <div class="portfolio-overlay">
       <span class="text-overlay">Click here boy !</span>
     </div> 
  </div> 
</div>

And the CSS :

.portfolio-frame {
  height: 94px;
  width: 165px;
  margin-left: 10px;
  margin-top: 46px;
   z-index:1;

}
.portfolio-overflow-hidden {
  height: 94px;
  width: 165px;
}
.portfolio-overlay .text-overlay {
  display: none;
}
.portfolio-frame:hover .portfolio-overlay {
  display:block;
  position:inherit;
  z-index:999;
  background-color: #000;
}
.portfolio-frame:hover .text-overlay {
  display:block;

  z-index:999;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  margin-top: -45px;
}

I make live version here : http://jsfiddle.net/fzKe7/

Upvotes: 0

Views: 2144

Answers (2)

Abhimanyu
Abhimanyu

Reputation: 57

.portfolio-frame:hover .portfolio-overlay {  display:block;  position:relative;  z-index:999;  background-color: #000; }

Change the position to Relative. That should work

Upvotes: 1

ediblecode
ediblecode

Reputation: 11971

You need to add position:relative to .portfolio-overlay

See fiddle here

You could also tidy up your css:

.portfolio-frame {
  height: 94px;
  width: 165px;
  margin-left: 10px;
  margin-top: 46px;    
}

.portfolio-overflow-hidden {
  height: 94px;
  width: 165px;
}

.portfolio-overlay .text-overlay {
  display: none;
  position:inherit;
  background-color: #000;
  position:relative;
  text-transform: uppercase;
  font-weight: bold;
  color: #fff;
  top:-45px;
}

.portfolio-frame:hover .text-overlay {
  display:block;
}

Upvotes: 1

Related Questions