change the background image by "hovering" over a div in css

Question

trying to get my code to change the background image to "color.jpg" when "spiral.svg" is being hovered over. I think im getting closer, definitely missing something but not sure what that is!

HTML

   <div class ="spiral">
       <img src="spiral.svg">
    </div>

CSS

img {
    max-width: ???;
    max-height: ???;
}

.spiral:hover {
    background:url('color.jpg') center;
    z-index: some positive number higher than my orig background image?
}


body {
   background:url('orig.jpeg') center;
   z-index: -60;
}

z-index works when position is specified.

CodeRomeos
– CodeRomeos

2015-09-19 21:23:44 +00:00
Commented Sep 19, 2015 at 21:23 — CodeRomeos
– CodeRomeos, Commented Sep 19, 2015 at 21:23

CodeRomeos · Accepted Answer · 2015-09-19 21:18:15Z

1

You may try something like this.

.twitter{
  display:block;
  border:1px solid red;
  width: 30px;
  height:30px;
  background-image:url(http://i.imgur.com/qM7IYaM.png?1);
  background-position:-32px 31px;
  transition:0.1s;
}

.twitter:hover{
   background-position:-32px 63px;  
}

<div href="https://twitter.com/georgevere12" class="twitter">
  
</div>

answered Sep 19, 2015 at 21:18

CodeRomeos

2,4481 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ben Casalino Over a year ago

ah yes this works, but im trying to target the <boby> tag. my hover img is actually small and im trying to have it replace the orig background image when being hovered over. starting to think it just might not be possible without js/jquery

CodeRomeos Over a year ago

you may scale the image using css on hover. By default it will be same as your specified size and on hover scale it to fit on screen with the colored image.

Ben Casalino Over a year ago

I can get it to change the scale of the image, but this link stackoverflow.com/questions/26822311/… I was reading says it is not possible to target the body tag for this with just using css if im reading it correctly, gonna try some jquery

Community · Accepted Answer · 2017-05-23 11:51:49Z

0

looks like this is not possible with just CSS/HTML however this was the best link i found using a tiny bit of jquery https://stackoverflow.com/a/19770298/5225450

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Sep 19, 2015 at 22:39

Ben Casalino

2,3935 gold badges23 silver badges28 bronze badges

Collectives™ on Stack Overflow

change the background image by "hovering" over a div in css

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related