Hide text on hover and show an image

Question

I made a button with some text in it and I want the text to disappear on hover and an image to appear in its place. Here is the HTML code:

#facebook {

  width: 200px;

  height: 50px;

  border-style: solid;

  border-color: white;

  border-width: 1px;

  border-radius: 7px;

  line-height: 50px;

  display: table-cell;

  transition-timing-function: ease-in-out;

  -webkit-transition: all 0.5s;

  -moz-transition: all 0.5s;

  -o-transition: all 0.5s;

  -ms-transition: all 0.5s;

  transition: all 0.5s;

}

#facebook:hover {

  width: 200px;

  height: 50px;

  border-style: solid;

  border-color: white;

  line-height: 50px;

  background: rgba(59, 89, 152, .6);

}

<a href="https://www.facebook.com">

  <div id="facebook"><span id="text">Facebook</span>

  </div>

</a>

So basically I want a Facebook logo to appear instead of text. I tried to do it alone, but I failed. Does anyone know how this can be done?

Answer 1

i suggest you don't use a div inside an a . it could cause errors. so i changed a bit your html structure ( the solution works the same with your solution ) .

so i set the id #facebook directly on the a and if you want it to behave like a div just add display:block to a#facebook

second, i've hidden the text when hover with visibility:hidden, you can also use opacity:0 . in this case it won't matter.

keep in mind that you can use transition with opacity but not with visibility

then on :hover added a background-image to the #facebook element ( you can add whatever url you like )

let me know if it helps ;)

#facebook { 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
border-width: 1px;
border-radius: 7px;
line-height: 50px;
display: table-cell;
transition-timing-function: ease-in-out;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-ms-transition: all 0.5s;

transition: all 0.5s;
background-position:center center;
}

#facebook:hover{ 
width: 200px; 
height: 50px; 
border-style: solid; 
border-color: white;
line-height: 50px;
background-color: rgba(59, 89, 152, .6);
background-image:url("http://cdn.sstatic.net/Sites/stackoverflow/img/favicon.ico");
background-repeat:no-repeat;

}
#facebook:hover #text {
  visibility:hidden;
 
}

<a href="https://www.facebook.com" id="facebook"><span id="text">Facebook</span></a>

Hide text on hover and show an image

Sign up