CODEWITHSUNDEEP
htmlcss
Kero Fawzy
Kero Fawzy

Reputation: 700

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

Upvotes: 5

Views: 2436

Answers (5)

Seimen
Seimen

Reputation: 7250

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

Upvotes: 5

JParkinson1991
JParkinson1991

Reputation: 1286

This can be achieved using the display css attribute.

#wrapper p { display: none; }
#wrapper:hover img { display: none; }
#wrapper:hover p { display: block; }

Your example had unecessary classes so they have been removed.

Solution:

<style>
    #wrapper p { display: none; }
    #wrapper:hover img { display: none; }
    #wrapper:hover p { display: block; }
</style>

<div id="wrapper">
    <img src="http://i.imgur.com/UHqk6nC.jpg" />
    <p>Some text</p>
</div>

See this fiddle for an example: https://jsfiddle.net/nt5vjywu/

Hope that helps!

UPDATE:

Updated fiddle with hovering text on top. Note the reorder of the img and p tag.

https://jsfiddle.net/nt5vjywu/2/

Upvotes: 0

Ahmed Salama
Ahmed Salama

Reputation: 2825

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

Upvotes: 0

Sharon
Sharon

Reputation: 177

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

Upvotes: 1

Marc Giroux
Marc Giroux

Reputation: 192

Look at this, http://www.w3schools.com/cssref/tryit.asp?filename=trycss_sel_hover

This is an example of "hover".

Let me know if this helps you out.

Thanks

Upvotes: 0

Related Questions