HTML5/CSS3: Hover Image Replacement - html

Question

I've read multiple solutions here on Stack Overflow, but I still haven't found my solution. I've tried adding image goes here and manipulating #one:hover with CSS, but nothing happened. Using image goes here and manipulating #one:hover with CSS I get limited results, but they're all wrong. The original image never gets replaced, and a very thin line of the replacement image appears underneath my original image. Here 's my code:
HTML5:
<nav>
<p/><p/>
<a id="one" href="form.html"><img src="nav.email.gif" alt="E-Mail Form" width="256px" height="100px"/></a>
</nav>
CSS3:
#one:hover
{
background-image: url('nav.email.ani.gif');
width:256px;
height:100px;
}
Using "background" instead of "background-image" gives me nothing, and using a div tag gives me nothing. I tried absolute placement of the replacement image, but again all I got was a thin line instead of a full size image (even when using width and height). Thanks in advance.

Answer 1

One solution is suggest is to use background-image to img element like:
#imgOne:hover {
background-image: url('http://placehold.it/200x100');
width: 256px;
height: 100px;
}
#imgOne {
background-image: url('http://placehold.it/400x200');
}
<nav>
<p/>
<p/>
<a id="one" href="form.html">
<img id="imgOne" src="" alt="E-Mail Form" width="256px" height="100px" />
</a>
</nav>

Answer 2

Here is another alternative.
<a id="one" href="form.html>
<img title="email" src="nav.email.gif" onmouseover="this.src='nav.email.ani.gif'" onmouseout="this.src='nav.email.gif'" />
</a>

Answer 3

Option 1: Using Css 'Hover'
Rather than using an img tag, why don't you use a 'normal' div element? That way, you can do something like the snippet below, which sets the background for both the 'normal' and 'hovered' version within the css itself?
div {
height: 200px;
width: 200px;
background: url(http://placekitten.com/g/200/200);
}
div:hover {
background: url(http://placekitten.com/g/200/500);
}
<div></div>
Option 2: Replace Using Javascript/JQuery
You could use javascript at this point to replace the image's src, but I (personally) feel this would be a slower/less efficient approach than using css, Although, it would go along the lines of:
$("#myImageID").hover(function(){
$(this)...
});

Answer 4

The problem you have, is that the backgroung image is assigned to the a tag, but then have a image overlaying it.
I'd try this:
#one {
display: inline-block; /* keep it as inline nide but make it aware of width and height */
width: 256px;
height: 100px;
background-image: url('nav.email.gif');
background-repeat: no-repeat;
text-indent: -9999px; /* to hide the SEO text */
}
#one:hover {
background-image: url('nav.email.ani.gif')
}
Important: remove the img tag and put some text for SEO reasons in the a tag, if you like:
Some text for SEO reasons like Contact-Formular foo bar baz
*SEO text is optional.

Answer 5

Using Pure css content is fast and easy
#one:hover img{ content:url("http://placehold.it/400x200") }
<nav>
<p/><p/>
<a id="one" href="form.html">
<img src="http://placehold.it/200x100" alt="E-Mail Form" width="256px" height="100px"/>
</a>
</nav>
or You can Use #Alex Char answer or use this alternative solution.
#one img:nth-child(2)
{
display: none
}
#one:hover img:nth-child(1)
{
display: none
}
#one:hover img:nth-child(2)
{
display: block
}
<nav>
<p/><p/>
<a id="one" href="form.html">
<img src="http://placehold.it/200x100" alt="E-Mail Form" width="256px" height="100px" />
<img src="http://placehold.it/400x200" alt="E-Mail Form" width="256px" height="100px"/>
</a>
</nav>