CODEWITHSUNDEEP
htmlcss
Jckxxlaw
Jckxxlaw

Reputation: 391

Image within div change on hover?

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">
    <a href="settings.html"></a>
</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?

Upvotes: 2

Views: 100

Answers (2)

coderpol
coderpol

Reputation: 303

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;
}

Upvotes: 0

jmore009
jmore009

Reputation: 12923

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">
  <a href="settings.html"><img src="http://www.placecage.com/50/50"/></a>
  <a href="settings.html"><img src="http://www.placecage.com/60/50"/></a>
</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

Upvotes: 1

Related Questions