在悬停时隐藏文本并显示图像

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; } 

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

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';
};