1

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;

}

user3466579
  • 31
  • 1
  • 6

1 Answers1

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

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

bjb568
  • 11,089
  • 11
  • 50
  • 71
  • To add to this, give your regular pics a z-index of, say, 1. Give everything that you want to be on top of that something higher than 1. – Manly Apr 08 '14 at 17:42