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