CSS fade-in background image - html

Question

I'm learning CSS and I want to make that on a hover on some text, the text disappears and there is a fade-in on an image. I've tested some things but it doesn't work the way I want to do it.
The text is a link in a and on the hover I set the background image. I could use an in the but I want the text to be in the middle of the and it's already in a with an absolute position.
Here's the HTML :
<div class="header">
<!--<ul>-->
<div class="header_element">
<a title="Home" href="page.php"> Home </a>
</div>
And the CSS :
div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}
div.header_element:hover {
background-position: center;
background-image: url("hover.png");
background-repeat: no-repeat;
}
Would appreciate if anyone could help me with this.

Answer 1

You would like to probably use opacity and fade-in effect.
div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}
div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 2s; /* Firefox < 16 */
-ms-animation: fadein 2s; /* Internet Explorer */
-o-animation: fadein 2s; /* Opera < 12.1 */
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
#-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
#-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
#-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
#-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
See the jsfidle if it's what you wanted.

Answer 2

Not sure if you can do it exactly the way you want. To "fade in" you normally animate the opacity of a layer, but that applies to the whole layer not just the background image. But why don't you move the Image to another layer, like this:
<div class="header_element">
<div class="header_background"></div>
<a title="Home" href="page.php"> Home </a>
</div>
Also it might be better to load the image before the user hovers, bc then you will have a visible delay until the image is actually loaded.
The CSS might look like this (not tested though):
.header_background {
transition: opacity 1s;
background-position: center;
background-image: url("hover.png");
background-repeat: no-repeat;
opacity: 0;
}
.header_element:hover > .header_background {
opacity: 1;
}

Answer 3

Try adding the following css to see if it works for you:
.header_element{
background: red;
display: inline-block;
}
.header_element > a{
display: inline-block;
padding: 5px 10px;
}
.header_element:hover > a{
opacity: 0;
}
.header_element:hover{
background: url(http://dummyimage.com/60x28/000/fff);
}
you can see the test here: jsfiddle

Answer 4

I have added text-indent property to your existing CSS. So when you hover the link the text will go off-screen(hide) and you will see only image.
.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}
.header_element a:hover{
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
display:block;
text-indent: -9999px;
}
http://jsbin.com/kexadaqaxu/3/edit