Code used in this page
<div class="stack-container">
<div class="stack-container-bottom">
<img src="images/1.jpg" alt="" class="ie-1st">
<img src="images/2.jpg" alt="" class="ie-2nd">
<img src="images/3.jpg" alt="" class="ie-3rd">
<img src="images/4.jpg" alt="" class="ie-4th">
<img src="images/5.jpg" alt="" class="ie-5th">
<img src="images/6.jpg" alt="" class="ie-6th">
<img src="images/7.jpg" alt="" class="ie-7th">
</div>
</div>
<style>
.stack-container {
position: relative;
height: 680px;
margin-bottom: 30px;
}
.stack-container-bottom {
position: absolute;
left: 200px;
bottom: 0;
width: 148px;
height: 130px;
z-index: 1000;
}
.stack-container img {
position: absolute;
left: 0px;
bottom: 0;
padding-bottom: 5px;
/* Firefox */
-moz-transition: -moz-transform 0.3s ease;
/* WebKit */
-webkit-transition: -webkit-transform 0.3s ease;
/* Opera */
-o-transition: -o-transform 0.3s ease;
/* Standard */
transition: all 0.3s ease;
}
.stack-container img:nth-child(7) {
/* Firefox */
-moz-transform: scale(1.5);
/* WebKit */
-webkit-transform: scale(1.5) translate(16px, -5px);
/* Opera */
-o-transform: scale(1.5);
/* Standard */
transform: scale(1.5);
}
.stack-container-bottom:hover img:nth-child(1) {
/* Firefox */
-moz-transform: rotate(12deg) translate(-4px, -600px);
/* WebKit */
-webkit-transform: rotate(12deg) translate(-4px, -600px);
/* Opera */
-o-transform: rotate(12deg) translate(-4px, -600px);
/* Standard */
transform: rotate(12deg) translate(-4px, -600px);
}
.stack-container-bottom:hover img:nth-child(2) {
/* Firefox */
-moz-transform: rotate(11deg) translate(5px, -520px);
/* WebKit */
-webkit-transform: rotate(11deg) translate(5px, -520px);
/* Opera */
-o-transform: rotate(11deg) translate(5px, -520px);
/* Standard */
transform: rotate(11deg) translate(5px, -520px);
}
.stack-container-bottom:hover img:nth-child(3) {
/* Firefox */
-moz-transform: rotate(10deg) translate(12px, -440px);
/* WebKit */
-webkit-transform: rotate(10deg) translate(12px, -440px);
/* Opera */
-o-transform: rotate(10deg) translate(12px, -440px);
/* Standard */
transform: rotate(10deg) translate(12px, -440px);
}
.stack-container-bottom:hover img:nth-child(4) {
/* Firefox */
-moz-transform: rotate(9deg) translate(18px, -360px);
/* WebKit */
-webkit-transform: rotate(9deg) translate(18px, -360px);
/* Opera */
-o-transform: rotate(9deg) translate(18px, -360px);
/* Standard */
transform: rotate(9deg) translate(18px, -360px);
}
.stack-container-bottom:hover img:nth-child(5) {
/* Firefox */
-moz-transform: rotate(8deg) translate(23px, -280px);
/* WebKit */
-webkit-transform: rotate(8deg) translate(23px, -280px);
/* Opera */
-o-transform: rotate(8deg) translate(23px, -280px);
/* Standard */
transform: rotate(8deg) translate(23px, -280px);
}
.stack-container-bottom:hover img:nth-child(6) {
/* Firefox */
-moz-transform: rotate(7deg) translate(26px, -200px);
/* WebKit */
-webkit-transform: rotate(7deg) translate(26px, -200px);
/* Opera */
-o-transform: rotate(7deg) translate(26px, -200px);
/* Standard */
transform: rotate(7deg) translate(26px, -200px);
}
.stack-container-bottom:hover img:nth-child(7) {
/* Firefox */
-moz-transform: rotate(6deg) translate(30px, -120px);
/* WebKit */
-webkit-transform: rotate(6deg) translate(30px, -120px);
/* Opera */
-o-transform: rotate(6deg) translate(30px, -120px);
/* Standard */
transform: rotate(6deg) translate(30px, -120px);
}
</style<
<!--[if IE]<
<style<
.stack-container-bottom:hover img.ie-1st {
left: 115px;
top: -550px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9781476007338057, M12=-0.20791169081775931, M21=0.20791169081775931, M22=0.9781476007338057); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9781476007338057, M12=-0.20791169081775931, M21=0.20791169081775931, M22=0.9781476007338057)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-2nd {
left: 98px;
top: -470px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.981627183447664, M12=-0.1908089953765448, M21=0.1908089953765448, M22=0.981627183447664); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.981627183447664, M12=-0.1908089953765448, M21=0.1908089953765448, M22=0.981627183447664)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-3rd {
left: 84px;
top: -390px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.984807753012208, M12=-0.17364817766693033, M21=0.17364817766693033, M22=0.984807753012208)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-4th {
left: 71px;
top: -310px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9876883405951378, M12=-0.15643446504023087, M21=0.15643446504023087, M22=0.9876883405951378); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9876883405951378, M12=-0.15643446504023087, M21=0.15643446504023087, M22=0.9876883405951378)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-5th {
left: 61px;
top: -230px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9902680687415704, M12=-0.13917310096006544, M21=0.13917310096006544, M22=0.9902680687415704); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9902680687415704, M12=-0.13917310096006544, M21=0.13917310096006544, M22=0.9902680687415704)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-6th {
left: 50px;
top: -150px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.992546151641322, M12=-0.12186934340514748, M21=0.12186934340514748, M22=0.992546151641322)"; /* IE8 */
zoom: 1;
}
.stack-container-bottom:hover img.ie-7th {
left: 42px;
top: -70px;
filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
M11=0.9945218953682733, M12=-0.10452846326765346, M21=0.10452846326765346, M22=0.9945218953682733); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand',
M11=0.9945218953682733, M12=-0.10452846326765346, M21=0.10452846326765346, M22=0.9945218953682733)"; /* IE8 */
zoom: 1;
}
</style<
<![endif]-->
