:hover and :hover:before not working properly

Narc Published at Dev

Narc

I've gone through a lot of the resolved questions with a similar title but nothing I try seems to work.

I want the ava.png image to redirect to another page, but on hover I want a :before image (ava_background_hoover.png) to show up.

I may be going about it all wrong, but this is what I have so far:

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
}

#slide1:hover {
  position: relative;
}

#slide1:hover:before {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  position: absolute;
  z-index: -1;
}

#slide2 {
  opacity: 1;
  position: relative;
  z-index: 2;
  margin-left: 7px;
  margin-top: 0px;
}

#slide3 {
  z-index: -1;
  position: absolute;
}

<section id="header">
  <div class="inner">
    <img id="slide1" src="https://www.upload.ee/image/6050955/ava.png"/><img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
  </div>
</section>

Fiddle

Mosh Feu

You can set #slide1:before's content as the default image. Then, on :hover, change the content attribute to the hover image.

If you do so, you need to change the img to a div (or span, just not an img).

#slide1 {
  position: relative;
  margin-left: 147px;
  margin-top: 0px;
  z-index: 100;
  display:inline-block;
}

#slide1:before {
  content: url("https://www.upload.ee/image/6050955/ava.png");  
}

#slide1:hover {
  position: relative;
}

#slide1:hover:after {
  content: url("https://www.upload.ee/image/6050956/ava_background_hoover.png");
  display: block;
  position: absolute;
  z-index: -1;
}

#slide2 {
  opacity: 1;
  position: relative;
  z-index: 2;
  margin-left: 7px;
  margin-top: 0px;
}

#slide3 {
  z-index: -1;
  position: absolute;
}

<section id="header">
  <div class="inner">
    <a id="slide1" href="http://google.com" target="_blank"></a>
    <img id="slide2" src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
  </div>
</section>

Working demo including the link: http://output.jsbin.com/cudimos

Collected from the Internet

Please contact [email protected] to delete if infringement.