Layered Image Effect Using CSS
This tutorial outlines a simple but impressive CSS effect for you to use on your website.
The effect...
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU9ZcDkNZDS-A-aOLb750FQSlHaKy3Qf0WjVQ40LjxY0dIm-OOmunJ6rFC39FwFE85NNozCnSlC4pg4vGInKdMoflqxNYvGDTtFYC-ZyTD9ZHBKzDvXZA_VL7iVTLd8AybXj0v9oTHwo/s1600/music+tuition+poster.jpg)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrHfU8B-5125K6fdmuL-3NFSlcDMnnhGN42WsuauRtgzfkvokRf_azgDfDCoDBGDfqkv0qWgRO5vxpLGqSHgWFYgd9NRd7LQuJhfrJ_viAT7U9WQI3PpSxnHk5Nm5VFVZLt6BwCmOxSgI/s1600/handball+for+life+poster.gif)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjefTUg5UbSlsy0Gl72U3IG_t-AHFQTHXYvM8dntWFPZ-IC5Ey9X7Ilky9WnQnM59UvELr1xrTFRMpE5WLjyqqHbnkstCQJkw2c-7-SkBGmH0BuxFFbJOqrYGWNOvOEI57p5izUJcNhbIk/s1600/completed+poster.png)
The HTML
The CSS
div.box1
{
z-index:1;
position:relative;
-webkit-transform: rotate(-3deg);
-ms-transform: rotate(-3deg);
-o-transform: rotate(-3deg);
transform: rotate(-3deg);
}
div.box2
{
z-index:2;
position:relative;
left:-150px;
}
div.box3
{
z-index:3;
position:relative;
left:-350px;
-webkit-transform: rotate(3deg);
-ms-transform: rotate(3deg);
-o-transform: rotate(3deg);
transform: rotate(3deg);
}
Layered Image Effect Using CSS
Reviewed by Opus Web Design
on
August 18, 2015
Rating:
![Layered Image Effect Using CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrU9ZcDkNZDS-A-aOLb750FQSlHaKy3Qf0WjVQ40LjxY0dIm-OOmunJ6rFC39FwFE85NNozCnSlC4pg4vGInKdMoflqxNYvGDTtFYC-ZyTD9ZHBKzDvXZA_VL7iVTLd8AybXj0v9oTHwo/s72-c/music+tuition+poster.jpg)