Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

transform: scale and positioning

transform: scale and positioning

Problem

How is that when I apply transform Scale the "z-index is changed" ? What i'm I missing ? Is there any "trick" for playing with transform ?

.thumb > a .img-cover{
    -webkit-transition: all 1.2s ease-out;border-radius:5px;
    -webkit-transform: scale(1);
}
.img-cover{
    position:relative;
    overflow:hidden;
}
.img-cover:before{
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    -webkit-transform: scale(1.1);
} ​

HTML

thumb-desc

live demo

Problem courtesy of: jpcarmona

Solution

Define the z-index yourself so it would do it for you.

.img-cover:before{
    position:absolute;
    z-index: 10;
    top:0;left:0;right:0;bottom:0;
    content:"";
    box-shadow: inset 0px 0 100px #f0f;}
.thumb > a:hover img {
    z-index: 0;
    -webkit-transform: scale(1.1);
} 

Example Code

Solution courtesy of: iMoses

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

transform: scale and positioning

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×