CODEWITHSUNDEEP
cssbackgroundhoveropacity
Mitch Moccia
Mitch Moccia

Reputation: 529

CSS background hover animation doesn't work when there is an image on top

The problem started when I needed to have a div set at 60% opacity and on hover it animates to 90% opacity.

The only catch is I need a full white (non transparent) PNG image on top of this box at all times.

So I tried the trick of overlaying a separate div containing the image and used the margins to bring it into position; BUT the background div animation hover over doesn't work when your mouse is on top of the image.

HTML

<div style="position:relative;top:-1px;left:0">
<div class="ontop"><img src="http://www.designdownloader.com/item/pngs/button01_google/button01_google-20110813210436-00005.png" alt="OneSpring - Play Video" /></div>
                <div id="box-video">


            </div>            
            </div>
</div>

CSS

#box-video {
    position: absolute;
    background-color:rgba(0,57,129,1);
    top: 0;
    left: 0;
    padding: 15px;
    font-family: 'Helvetica Neue Light', Arial, Helvetica, sans-serif;
    width: 210px;
    height: 130px;
    opacity: 0.6;
    filter: alpha(opacity=60);
     -webkit-transition: opacity .25s ease-in-out;
     -moz-transition: opacity .25s ease-in-out;
     -ms-transition: opacity .25s ease-in-out;
     -o-transition: opacity .25s ease-in-out;
     transition: opacity .25s ease-in-out;
}
#box-video:hover, .ontop:hover {
    cursor: pointer;
    /*color: #ffffff;*/
    text-decoration: none;
    opacity: 0.9;
    filter: alpha(opacity=90);
    zoom: 1;
    -webkit-transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -ms-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

div.ontop {
    position: relative;
    top: 4.7em;
    left:30px;
    z-index:1002;
}

Here is a JSFiddle showing the problem:

http://jsfiddle.net/xpancom/fZrWA/

How can you make the background hover work even when you are on top of the image?

Upvotes: 0

Views: 1328

Answers (3)

fmvilas
fmvilas

Reputation: 56

I think you're talking about CSS pointer-events property. pointer-events | MDN

So your code might look like this:

div.ontop {
  position: relative;
  top: 4.7em;
  left:30px;
  z-index:1002;
  pointer-events: none;
}

http://jsfiddle.net/8CZEY/

Upvotes: 1

Madzgo
Madzgo

Reputation: 33

You could alternatively use :before or :after pseudo class.

It will clean up your code a lot.

This is what your HTML can look like:

<div style="position:relative;top:-1px;left:0">
  <div id="box-video"></div>
</div>

Here is more on them, and here is the fiddle: http://jsfiddle.net/jyHMf/

See if that is what you were looking for.

Upvotes: 1

Guffa
Guffa

Reputation: 700910

Put an id on the container:

<div id="box" style="position:relative;top:-1px;left:0">

Now put the hover event on the container instead, and let it affect the child element:

#box:hover {
  cursor: pointer;
}

#box:hover #box-video {
  opacity: 0.9;
  filter: alpha(opacity=90);
  zoom: 1;
  -webkit-transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -ms-transition: opacity .25s ease-in-out;
  -o-transition: opacity .25s ease-in-out;
  transition: opacity .25s ease-in-out;
}

Demo: http://jsfiddle.net/fZrWA/2/

Upvotes: 0

Related Questions