Question

I’m having some problem with ccs3 hover transition over a nested div element. It seems that when I MOUSE_OVER img_cover it plays the animation but when move the mouse over anything in the img_one container it starts playing the MOUSE_OUT animation even though i’m still in still in the parent div. This is an undesired effect, I only want to play MOUSE_OUT when i move out of the parent div (img_one container). What am I doing wrong?

I created a Jsfiddle for a demo.

http://jsfiddle.net/6wrdD/16/

---------------------------
| img_one  container      |
|  ____________________   |
|  |kool_mask         |   |
|  |------------------|   |   
|  |text              |   |
|  |button            |   |
|  |__________________|   |
|                         |
|  ____________________   |
|  |img_cover         |   |
|  |__________________|   |
---------------------------

CODE: [HTML]

<div class="image_one">

    <div class="kool_mask">
        <h5> Heading </h5>
        <div class="p2"> Text </div>

        <a href="#"><input type="button" id="kool_buttons" value="launch">  </a>

    </div>
<div id="imgcover"> <img src="http://blogs.lib.utexas.edu/texlibris/files/HAL-9000.jpg" alt="" /> </div>
</div>

CODE: [CSS]

.kool_mask 

{
background: rgba(66, 72, 71, 0.7);

position:relative;
width:288px;
height:250px;

top:0;
left:0;
}

.image_one
 {
position:relative;
width:288px;
height:250px;



}

.kool_mask a 
{

color:#ffffff;
}


#imgcover
{
top:0;
left:0;
position:absolute;
width:288px;
height:150px;

 -webkit-opacity: 1;
  -moz-opacity: 1;
  opacity: 1;
  -webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -ms-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;


}

#imgcover:hover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;

  /* Firefox */

-moz-transform: scale(0) rotate(320deg) translate(50px);

/* WebKit */

-webkit-transform: scale(0) rotate(320deg) translate(50px);

/* Opera */

-o-transform: scale(0) rotate(320deg) translate(50px);

/* Standard */

transform: scale(0) rotate(320deg) translate(50px);

}

h5 
{
font-size: 16px;
color: #FFFF00;
text-align:center;
background-color: #000000;
margin-right: 470px;
margin-left: 100px;
padding-top: 2px;
padding-left: 4px;
font-family: Georgia, "Times New Roman", Times, serif;
font-weight: normal;

}


.kool_buttons {
text-align:center;
width:50px;
height:50px;
border:1px solid black:

background: rgba(66, 72, 71, 0.7);


}​
​

Answer 1

Just change the #imgcover:hover selector to .image_one:hover #imgcover:

.image_one:hover #imgcover
{

-webkit-opacity: 0;
  -moz-opacity: 0;
  opacity: 0;
...

http://jsfiddle.net/Kyle_/6wrdD/17/

This selects the image when the parent element is hovered, so that the triggering element is only the parent and not the image itself, but animates the image. 🙂