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>
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
withopacity
but not withvisibility
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>