CSS hover won't work in Chrome

Question

I'm making a 3d box so I need most elements absolutely positioned. Front side is img, side is an empty div at the moment. Third div is a caption div, over the image with opacity of 0. I made simple hover effect to change this opacity to 1, it's working fine in FF, but not in Chrome.

I've seen that there are some bugs when using hover on absolute positioned elements in Chrome, but as I've understood, those occur only on elements with z-index, maybe I'm mistaken. Anyhow, here's the box code, I could really use some help figuring this one out, as I'm not able to pinpoint the problem Chrome is having.

HTML:

<div class="image-wrap">
        <div class="image">
            <img src="img/unyield.jpg" class="image-front">
            <div class="image-caption">
                <span class="caption-content">Unyielding sense</span><br/>
                    <span class="caption-one">cover artwork</span><br/>
                    <span class="read-more">INFO</div>
            <div class="image-side"></div>
        </div>
    </div>

CSS BOX:

.image-wrap {
position: absolute;
top: 50%;
left: 5%;
margin-top: -225px;
width: 360px;
height: 550px;
perspective: 1000px;
-ms-perspective: 1000px;
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
-o-perspective: 1000px;
}

.image {
position: absolute;
width: 360px;
height: 550px;
transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform: translateZ(-130px);
-ms-transform: translateZ(-130px);
-moz-transform: translateZ(-130px);
-webkit-transform: translateZ(-130px);
-o-transform: translateZ(-130px);
transition: all 1s ease;
-ms-transition: all 1s ease;
-moz-transition: all 1s ease;
-webkit-transition: all 1s ease;
-o-transition: all 1s ease;
}


.image-front, .image-side {
position: absolute;
width: 360px;
height: 550px;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}


.image-side {
transform: rotateY(90deg) translateZ(180px);
-ms-transform: rotateY(90deg) translateZ(180px);
-moz-transform: rotateY(90deg) translateZ(180px);
-webkit-transform: rotateY(90deg) translateZ(180px);
-o-transform: rotateY(90deg) translateZ(180px);
border: 1px solid #B8B5B5;
background-color: green;
}

And the problematic caption CSS:

.image-caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30%;
opacity: 0;
background-color: black;
color: white;
text-align: center;
padding-top: 25px;
transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
}

.image:hover .image-caption{
opacity: 0.8;
}

score 0 · Accepted Answer · edited May 23 '17 at 11:49

0

this is giving problems px use deg

.image-front {
transform: translateZ(180px);
-ms-transform: translateZ(180px);
-moz-transform: translateZ(180px);
-webkit-transform: translateZ(180px);
-o-transform: translateZ(180px);    
}

see stackoverflow.com/questions/hardware-acceleration-in-css3 and css-performance-relative-to-translatez0

edited May 23 '17 at 11:49

Community

1
1

answered Mar 20 '14 at 02:33

alessandrio

4,282
2
29
40

I don't have problems rotating the box, the trouble is that `caption div` won't change opacity on hover. I posted the whole transform code because the problem might be in html as well as in css, and I just can't see it. – Davion Mar 20 '14 at 02:42
animations and rotations consume hardware, and to minimize this chrome does not work very well with `px`, use `deg`. try changing the px by deg or not use any values, it is also acceptable – alessandrio Mar 20 '14 at 02:52
Yeah, I've tried it now, got it to work, although I'll have to restyle everything. Thanks. – Davion Mar 20 '14 at 02:57

CSS hover won't work in Chrome

1 Answers1