:hover and :hover:before not working properly - html

Question

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 1

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

Answer 2

the :before and :after pseudo-elements are used to insert content before, or after, the content of an element . img doesn't have content. so you can't use pseudo-elements on img .
instead, you should use <div> with ids #slide1 and #slide2 in which you put img or use background-img on that divs , you choose.
i made a simple example below. click to show snippet. let me know if it helps
P.S. you can position the :before how you want. i just guessed how you wanted it
#slide1,#slide2 { display:inline-block}
#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;
right: -150%;
bottom: -150%;
}
<section id="header">
<div class="inner">
<div id="slide1">
<img src="https://www.upload.ee/image/6050955/ava.png"/>
</div>
<div id="slide2">
<img src="https://www.upload.ee/image/6050954/arrow.png" width="140" height="160" alt=""/>
</div>
</div>
</section>