Kero Fawzy Kero Fawzy - 6 months ago 8
HTML Question

I want to hide an image and display text in its place when hovering over it

I want to hover over my image and have the text appear in place of image
but I don't want to use jQuery or JavaScript .



#wrapper .text {
position: relative;
bottom: 30px;
left: 0px;
visibility: hidden;
}
#wrapper:hover .text {
visibility: visible;
}

<div id="wrapper">
<img src="kero.png" class="hover" height="200px" width="200px/>
<p class="text">text</p>
</div>​




Answer

Not sure if I understand correctly what you want, but does this work for you?

Initial Case

#wrapper {
  position: relative;
}

.text {
  opacity: 0;
  position: absolute;
  bottom: 0;
}

.hover:hover {
  opacity: 0;
}

.hover:hover + .text {
  opacity: 1;
}
<div id="wrapper">
  <img src="http://placehold.it/200x200" class="hover" />
  <p class="text">text</p>
</div>​

Extended Case

#wrapper {
  display: inline-block;
  position: relative;
}

.text {
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  transition: opacity .5s;
  background: rgba(0, 0, 0, .5);
  color: white;
  margin: 0;
  padding: 10px;
}

.hover {
  display: block;
}

#wrapper:hover .text {
  opacity: 1;
}
<div id="wrapper">
  <img src="http://placehold.it/200x200" class="hover" />
  <p class="text">text</p>
</div>​