Hide text on hover and show an image - html

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

Something like that?
https://jsfiddle.net/d04pLr6q/
#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-color: rgba(59, 89, 152, 1);
overflow:hidden;
text-align: center;
color:white;
}
a{
text-decoration:none;
}
#facebook:hover{
width: 200px;
height: 50px;
border-style: solid;
border-color: white;
line-height: 50px;
background-image: url(http://www.underconsideration.com/brandnew/archives/facebook_2015_logo_detail.png);
background-size: 100%;
background-position: center;
color: transparent;
}
You can replace this facebook img with any logo. Its not perfect but pure CSS :)

Answer 2

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 html structure ) .
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;
}
<span id="text">Facebook</span>

Answer 3

You need 2 blocks of hover CSS. See example below and adjust as needed.
#facebook {
width: 200px!important;
height: 50px!important;
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;
position: relative;
display: inline-block;
}
img {
width: auto;
height: 50px;
display: none;
}
#facebook:hover img {
display: block;
height: 50px;
width: auto;
}
#facebook:hover #text {
display: none;
}
#facebook img {
width: 100%;
height: auto;
}
<a href="https://www.facebook.com">
<div id="facebook">
<span id="text">Facebook</span>
<img src ="http://i65.tinypic.com/2evxmqs.jpg" width="150px" height="45px" />
</div></a>

Answer 4

#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);
}
#facebook span {
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 span {
color: transparent;
}
<a href="https://www.facebook.com">
<div id="facebook"><span id="text">Facebook</span>
</div>
</a>

Answer 5

you can use JavaScript for that.
document.getElementById('facebook').onmouseover = function(){
document.getElementById('facebook').innerHTML = '';
document.getElementById('facebook').style.backgroundImage = 'url(pic.jpg)';
document.getElementById('facebook').style.backgroundSize = 'cover';
};
document.getElementById('facebook').onmouseout = function(){
document.getElementById('facebook').innerHTML = 'Facebook';
document.getElementById('facebook').style.backgroundImage = 'none';
};