Levi Villarreal Levi Villarreal -4 years ago 81
CSS Question

CSS Hover Not Working on Transformed Elements

I'm trying to have a skewed element change size on hover but for whatever reason, the elements only change whenever the mouse is about 200px below where it should be. I'm guessing this is either happening because of the way I transformed the elements or because of the way I positioned them on the page.

Code below



.layers {
margin: 150px 150px;
height: 500px !important;
width: 500px !important;
-webkit-perspective: 1000px; /* Chrome, Safari, Opera */
perspective: 1000px;
}

.layer img {
height: 500px;
width: 500px;
-webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
background: rgba(255, 255, 255, 0.65);
-webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera */
transform: rotateX(75deg);
display: inline;
transition: all .5s;
-webkit-transition: all .5s;
}

.layer:hover img {
-webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
height: 510px;
width: 510px;
transition: all .5s;
-webkit-transition: all .5s;
}

.layer1 {
display: inline-block;
position: relative;
z-index: 3;
}

.layer2 {
display: inline-block;
position: relative;
z-index: 2;
bottom: 450px;
}

.layer3 {
display: inline-block;
z-index: 1;
position: relative;
bottom: 900px;
}

<div class="layers">
<div class="layer1 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer1 -->
<div class="layer2 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer2 -->
<div class="layer3 layer">
<img src="http://placehold.it/500x500" alt="">
</div><!-- layer3 -->
</div><!-- layers -->




Answer Source

Try putting the transform: rotateX(75deg); on .layer instead of its child image, like so:

.layers {
    margin: 150px 150px;
    height: 500px !important;
    width: 500px !important;
    -webkit-perspective: 1000px; /* Chrome, Safari, Opera  */
    perspective: 1000px;
}

.layer {
    -webkit-transform: rotateX(75deg); /* Chrome, Safari, Opera  */
    transform: rotateX(75deg);
}


.layer img {
    height: 500px;
    width: 500px;
    -webkit-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 25px 0px rgba(0,0,0,0.75);
    background: rgba(255, 255, 255, 0.65);
    display: inline;
    transition: all .5s;
    -webkit-transition: all .5s;
}

.layer:hover img {
    -webkit-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
    -moz-box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
    box-shadow: 0px 0px 65px 0px rgba(0,0,0,0.75);
    height: 510px;
    width: 510px;
    transition: all .5s;
    -webkit-transition: all .5s;
}

.layer1 {
    display: inline-block;
    position: relative;
    z-index: 3;
}

.layer2 {
    display: inline-block;
    position: relative;
    z-index: 2;
    bottom: 450px;
}

.layer3 {
    display: inline-block;
    z-index: 1;
    position: relative;
    bottom: 900px;
}
<div class="layers">
                   <div class="layer1 layer">
                       <img src="http://placehold.it/500x500" alt="">
                   </div><!-- layer1 -->
                   <div class="layer2 layer">
                       <img src="http://placehold.it/500x500" alt="">
                   </div><!-- layer2 -->
                   <div class="layer3 layer">
                       <img src="http://placehold.it/500x500" alt="">
                   </div><!-- layer3 -->
               </div><!-- layers -->

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download