CODEWITHSUNDEEP
csshtmlhover
Cedric Berger
Cedric Berger

Reputation: 117

Make image fade out on mouseover in the div

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"/>
<a href="http://twitter.com" target="_blank">Follow me</a>
<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! :)

Upvotes: 0

Views: 1970

Answers (5)

Nicholas Hazel
Nicholas Hazel

Reputation: 3740

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"/>
<a href="http://twitter.com" target="_blank">Follow me</a>
<img class="icons" src="https://cdn3.iconfinder.com/data/icons/ose/Arrow%20Right.png"/>
</div>

CSS

.subcontainer:hover > img {
    transition: 0.2s;
    opacity: 0;
}

Upvotes: 2

mjkaufer
mjkaufer

Reputation: 4216

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/

Upvotes: 2

uhs
uhs

Reputation: 848

You can use jquery.

$(".icons").hover(function(){
$(".icons").hide();
});

Upvotes: 0

void main
void main

Reputation: 80

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;
}

Upvotes: 0

Siva Charan
Siva Charan

Reputation: 18064

Do this way:

.icons:hover {
  display: none;
}

Upvotes: 1

Related Questions