Image within div change on hover? - html

Question

I'm trying to have it so that an image of a yellow cog sits inside a div with a yellow border and a white background, and then upon hover the cog changes to white and the background changes to yellow. I'm currently setting the first image as the background of the div, and then using div:hover to change the background on hover, however the spacing etc. doesn't quite work and the border doesn't go around the image properly. Is it possible to have it so the image is inside a link rather than as the background of the div? Here is the code I'm using:
HTML:
<div id="settings">
</div>
CSS:
#settings {
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: #fff url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings:hover {
background: #ffff00 url(img/cog_white.png) 0 0 no-repeat;
}
Any ideas?

Answer 1

It is possible although not very efficient. You can have two images and show and hide them based on hover:
HTML
<div class="button_link">
<img src="http://www.placecage.com/50/50"/>
<img src="http://www.placecage.com/60/50"/>
</div>
CSS
.button_link a:last-child{
display: none;
}
.button_link:hover a:first-child{
display: none;
}
.button_link:hover a:last-child{
display: block;
}
FIDDLE
If you can post a fiddle recreating the issue with the images you're using there is probably a more efficient way of doing this with just CSS and no additional HTML involved
UPDATE
This is how I would do this, with just CSS:
NEW FIDDLE

Answer 2

You can use this instead:
#settings a{
display:block;
width:100px; /* adjust your width */
height:100px;/* adjust your height */
border: 4px solid #ffff00;
padding: 10px 20px 10px 20px;
background: url(img/cog_yellow.png) 0 0 no-repeat;
}
#settings a:hover {
background: url(img/cog_white.png) 0 0 no-repeat;
}