Hovering an image in front of an image - css

Question

I am a new user to html and css and am making my first website. I am trying to take an image and have an image hover over it, except appear as a different color. I read other posts similar to this, but am still having difficulties.
This is the portion of my html:
<div id= "silhouette_3">
<img src= "images/silhouette_kickboxing.gif" />
</div>
and this is the css:
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#silhouette_3 img:hover
{
background-image: url('images/silhouette_kickboxing_color.gif');
z-index: 100;
}
I believe one of my issues is that one image is a background image and the other is not, but I am unsure of what else I could try. Any help out there would be much appreciated. Thanks so much!

Answer 1

You're right, the images/silhouette_kickboxing_color.gif is a background but <img src=".."/> is not.
Here is a solution:
<div id= "silhouette_3">
<img />
</div>
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img:hover
{
background-image: url('images/silhouette_kickboxing_color.gif');
z-index: 100;
}
When the img is not actually a image anymore, I prefer you should relace it with a div.

Answer 2

First Image:
Second Image:
CSS
#hovereffects:hover {
content: url('http://dummyimage.com/100x100/eb00eb/fff');
}
Fiddle
You can also check this Fiddle

Answer 3

You are right that the problem is one of the image is a background-image and the other is not, you can fix it by placing the colored image on top and the default image as the background-image then use opacity to hide the top layer (colored image) and finally show it on mouseover:
HTML:
<div id= "silhouette_3">
<img src= "images/silhouette_kickboxing_color.gif" />
</div>
CSS:
#silhouette_3{
background-image: url('images/silhouette_kickboxing.gif');
}
#silhouette_3 img
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
opacity: 0;
}
#silhouette_3:hover img
{
opacity: 1;
}

Answer 4

Technically speaking, your code probably works, but the background-image won't show even though it's there when you hover your mouse over it because a background can't show above its foreground. You can't set the z-index just on the background-image because it's not a separate element.
There are many ways to accomplish this. You could set a background image on the div, then set your other image only to show when you hover over it.
For example:
HTML:
<div id= "silhouette_3">
<img src= "http://lorempixel.com/400/200/sports" />
</div>
CSS:
#silhouette_3
{
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
background-image: url("http://lorempixel.com/400/200/abstract");
background-repeat: no-repeat;
}
#silhouette_3 img {
visibility: hidden;
}
#silhouette_3:hover img {
visibility: visible;
}
This way, the background-image in the CSS is the one that shows initially and the one in the img tag is the one that shows when you hover over it.
I created a demo at CodePen: http://codepen.io/Ghodmode/pen/foIhJ
Update: The images seem to me more like content than presentation, so I'd rather have them in the HTML than the CSS. I updated my CodePen demo to do it a little differently. I like this way better ...
HTML:
<div id="silhouette_4">
<img class="img1" src="http://lorempixel.com/400/200/city">
<img class="img2" src="http://lorempixel.com/400/200/people">
</div>
CSS:
#silhouette_4 img {
float: right;
margin: 8px 20px 0px 0px;
padding: 0px 0px 0px 0px;
}
#silhouette_4 .img2 {
display: none;
}
#silhouette_4:hover .img1 {
display: none;
}
#silhouette_4:hover .img2 {
display: inline-block;
}