CODEWITHSUNDEEP
cssimagecss-transitionsbehind
user3466579
user3466579

Reputation: 31

Expaning scale effect of images behind themselves using CSS transitions

I am creating an illustration portfolio site and using CSS transitions to scale boxes larger to show detailed thumbnails of work.

But I am struggling because when I hover over the thumbnails they always seem to be behind one another like so: demo

I need them to go in front and so the user can see detail of the images.

I have all the structure there, I just cant tell what I am doing wrong to make them go behind themselves.

Any help would really be appreciated.

This is the code for the scaling effect!

scale {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;

}

.scaleMe:hover {
transform: scale(1.2);
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
-moz-transform: scale(1.2);
-webkit-box-shadow: 3px 3px 3px #666666;
-moz-box-shadow: 3px 3px 3px #666666;
-o-box-shadow: 3px 3px 3px #666666;
box-shadow: 3px 3px 3px #666666;

}

Upvotes: 1

Views: 136

Answers (1)

bjb568
bjb568

Reputation: 11498

.scaleMe:hover {
    z-index: 1;
}

Giving a higher z-index will push it over lower z-index elements. The default is 0. Fiddle

Upvotes: 1

Related Questions