Narc Narc - 3 months ago 8
CSS Question

:hover and :hover:before not working properly

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

Answer

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

Comments