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

Question

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 1

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>​

Answer 2

Working fiddle : https://jsfiddle.net/2y67zerm/ U can use either display or visibility attributes

#wrapper .text {
  position: absolute;
  bottom: 30px;
  left: 10px;
  top:10px;
  visibility: hidden;
  display:none;
}
#wrapper:hover .text {
  visibility: visible;
  display:block;
  z-index:1000;
}

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