CODEWITHSUNDEEP
htmlcsshoverz-index
fuchslochtv
fuchslochtv

Reputation: 1

how to show img behind text with :hover?

i have a div with a text with a link inside. after that text div, i have a div with an img. now, i want that when i :hover the link the img spawns behind the text. when the img div is in the text div container it works, but then it spawns over the text.

html

<body>

<div id="text">
text with a <a id="link">hover me link</a>
</div>

<div id="pic">
<img src="pic.jpg"/>
</div>

</body>

css

<style type="text/css">
#text {
    position: absolute;
    z-index:2;
    }

#pic {
    display:none;
    position:fixed;
    top:10px;
    left:20px;
    z-index:1;
}

#link:hover ~ #pic {
    display:block;
}
</style>

Upvotes: 0

Views: 1455

Answers (2)

Alexandre Annic
Alexandre Annic

Reputation: 10768

The best solution is to use the background property as propsed by Temani Afif. Hoverwer, if you want to use the <img/> tag, there is a tricky way using z-index: -1. 

#pic {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background: red;
  height: 100px;
  width: 100px;
  z-index: -1;
}

#text, #link {
  position: relative;
}

#link:hover + #pic {
  display: block;
}
<div id="text">
    text with a <a id="link">hover me link</a>
    <img id="pic" src="https://lorempixel.com/400/200"/>
</div>

Since #pic is inside #text and since you cannot select previous element in css you must use z-index: -1 to keep your image behind.

Upvotes: 0

Temani Afif
Temani Afif

Reputation: 273261

You may try something like this:

#link:before {
  content:url(https://lorempixel.com/400/200/);
  position:fixed;
  z-index:-1;
  top:0;
  left:0;
  display:none;
}
#link:hover::before {
  display:block;
}
<div id="text">
    text with a <a id="link">hover me link</a>
  </div>

Upvotes: 2

Related Questions