Make image fade out on mouseover in the div - css

Question

I know my question may look weird at first, but let me explain...
I have a div, named subcontainer which contains two elements :
Two icons and a link.
Basically, I want the div to make the two icons disappear on hover, BUT not my link. Here is my code :
<div class="subcontainer">
<img class="icons" src="images/arrow_right.png"/>
Follow me
<img class="icons" src="images/arrow_left.png"/>
</div>
**Edit : I want the icons to disappear on subcontainer:hover. Not on icons:hover.
If you have any questions to help me, just ask! :)

Answer 1

Use psuedo selectors:
View Here: http://jsfiddle.net/SinisterSystems/hajt6/3/
By doing it this way, you are telling it to only target the img elements that are children of the .subcontainer, but also allowing you to target the entire div without affecting the a element.
<div class="subcontainer">
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
Follow me
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>
CSS
.subcontainer:hover > img {
transition: 0.2s;
opacity: 0;
}

Answer 2

If you want to make the image fade, use the following CSS:
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.icons:hover{
opacity:0;
}
Here's a fiddle: http://jsfiddle.net/74wPn/
EDIT: Revised to fit asker's comment's needs.
.icons{
transition: all 0.5s; /*how long you want the fade to last*/
}
.subcontainer:hover .icons{
opacity:0
}
Updated fiddle: http://jsfiddle.net/74wPn/1/

Answer 3

Do this way:
.icons:hover {
display: none;
}

Answer 4

If you want it to disappear instantly:
.icons:hover {
display: none;
}
If you want it to do it over a set time period:
.icons:hover {
transition: 0.2s;
opacity: 0;
}

Answer 5

You can use jquery.
$(".icons").hover(function(){
$(".icons").hide();
});