Hover over one div, change background over link in div using HTML/CSS

Question

I want to change the background image of the container such that when I hover on a link in the div, the background image changes.

Reading in stackoverflow and other sources, this should work, but I have tested in both Chrome and Edge. Neither is working at the moment.

#container {
  width: 50%;
  height: 300px;
  position: relative;
}

#text {
  position: absolute;
  font-size: 3em;
  z-index: 5;
}

#text:hover~#background {
  background-image: url("http://lorempixel.com/400/200/food/");
}

#background {
  width: 100%;
  background-image: url("http://lorempixel.com/400/200/animal/");
  background-position: center;
  background-size: cover;
  height: 100%;
  opacity: 0.5;
  position: absolute;
}

<div id="container">
  <div id="background"></div>
  <div id="text"><a href="http://www.google.ca">Google</a></div>
</div>

Css doesn't let you 'go back up' the way you would like to - are you able to change your HTML? — A Haworth, Oct 15 '21 at 21:20

score 2 · Accepted Answer · answered Oct 15 '21 at 21:27

2

If you are able to change your HTML, swap the background and text elements.

Then hovering on the text element can pick up its sibling element which is the background as it comes after it in the flow:

#container {
  width: 50%;
  height: 300px;
  position: relative;
}

#text {
  position: absolute;
  font-size: 3em;
  z-index: 5;
}

#text:hover~#background {
  background-image: url("https://picsum.photos/id/1015/300/300");
}

#background {
  width: 100%;
  background-image: url("https://picsum.photos/id/1016/300/300");
  background-position: center;
  background-size: cover;
  height: 100%;
  opacity: 0.5;
  position: absolute;
}

<div id="container">
  <div id="text"><a href="http://www.google.ca">Google</a></div>
  <div id="background"></div>
</div>

But an alternative way could be to put your background images onto a pseudo element and cut out the need for a div background which isn't really needed to be a 'proper' element as it is just decoration.

answered Oct 15 '21 at 21:27

A Haworth

30,908
4
11
14

Thank you. The goal was to have a low opacity background with no-opacity text (and working links) over top. When I had the text/links in the same div with the background, I had issues with opacity of the text (same opacity of the background). Other things I tried resulted in the links not being clickable. – Kurt_eh Oct 15 '21 at 21:38
Hi, did I misunderstand the goal? – A Haworth Oct 15 '21 at 21:40
I think you got it. I will retry and let you know how it worked! This is for a class project. – Kurt_eh Oct 15 '21 at 21:42
@Kurt_eh note that opacity is rendered last covering the entire element and can not be canceled or negeated by another element. It would be easier not to use opacity at all but to use a semi-transparent background by using a `rgba` value. In `rgba` you have a 4th value for opacity that only applies to the background-color itself but not to the text. – tacoshy Oct 15 '21 at 21:56
Hi @tacoshy, I don't understand the relevance of your comment - could you explain? Thanks. – A Haworth Oct 15 '21 at 21:58
@AHaworth the OP commented: *When I had the text/links in the same div with the background, I had issues with opacity of the text (same opacity of the background). Other things I tried resulted in the links not being clickable.* -> which in my interpretation means that he has an issue that the opacity influences also the text which he tries to prevent. – tacoshy Oct 15 '21 at 21:59
Ah, yes, fine - I thought it was a comment on my answer (which keeps the opacity stuff separate from the text, either by keeping the background in a separate element or by putting it in a pseudo element). – A Haworth Oct 15 '21 at 22:01
I think I see what I did wrong. The example I posted above was oversimplified from what I was doing. In my project, I had the ID code inside the div, on the "a" tag. Because it was inside the text div, it won't change the bg div because that was one level up. To do what I want, I need a bunch of inline-block divs to keep everything at the same level! – Kurt_eh Oct 15 '21 at 22:25

score 0 · Answer 2 · answered Oct 15 '21 at 22:09

#background {
  
  background-image: url("http://lorempixel.com/400/200/sports/");
  height:200px;
 
 
}

#container:hover > div:not(:hover){
   background-image: url("http://lorempixel.com/400/200/food/");
}

#text{height:0;}

<div id="container">
  <div id="background">abc</div>
  <div id="text"><a href="http://www.google.ca">Google</a></div>
</div>

Kurt_eh · Answer 3 · 2021-10-16T04:16:32.900

Thank you all.

Here is what I finally did:

#containerGen {
  width: 100%;
  height: 200px;
  position: relative;
}

#one {
  position: absolute;
  z-index: 5;
}

#alive {
  position: absolute;
  z-index: 5;
  top: 9em;
}

#alight {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 3em;
}

#and {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 6.25em;
}

#alone {
  position: absolute;
  z-index: 5;
  top: 9em;
  left: 8em;
}

#follow {
  position: absolute;
  z-index: 4;
  top: 9em;
}

#alive:hover~#background {
  background-image: url("http://lorempixel.com/400/200/food/");
}

#alight:hover~#background {
  background-image: url("http://lorempixel.com/400/200/city/");
}

#alone:hover~#background {
  background-image: url("http://lorempixel.com/400/200/nature/");
}

#background {
  width: 100%;
  background-image: url("http://lorempixel.com/400/200/sports/1/");
  background-position: center;
  background-size: cover;
  height: 500px;
  opacity: 0.5;
  position: absolute;
  z-index: 0;
}

<div id="containerGen">
  <div id="one">
    <p>
      M. "Em" Savage has awoken to find herself in what can only be called a stone sarcophagus. Woken up with no memory of who she is (save for the name on her "tomb") she must free the others trapped with them, discover not only who, but where they are, and
      lead their way out of whatever has them trapped in the dark.
    </p>
  </div>
  <div id="alive"><a class="bold wavyLine" href="https://scottsigler.com/book/alive/">Alive,</a> </div>
  <div id="alight"><a class="bold wavyLine" href="https://scottsigler.com/book/alight/">Alight,</a> </div>
  <div id="and">and</div>
  <div id="alone"><a class="bold wavyLine" href="https://scottsigler.com/book/alone/">Alone</a> </div>
  <div id="follow">
    <span style="margin-left:10.75em;">follow</span> the "birthday children" as they discover who they are, where they came from, and the malevolent purpose for why they are there!
    <p>The author of this page makes a guest appearance as a gunner during a battle in "Alone." It is unknown at this point if I survived.</p>
  </div>
  <div id="background"></div>
</div>

Hover over one div, change background over link in div using HTML/CSS

3 Answers3