bux bux - 3 months ago 9
CSS Question

Hide text on hover and show an image

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

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>