CSS Image Styling (Images On Table Style)

We will use CSS styles to create an Polaroid Image (Images on Table Style). It uses CSS transform for rotating the images and CSS box-shadow for adding shadows to images.

Images on Table Style

This example use CSS Styles to create images with Polaroid style i.e. it will be shown like the images is on the Table.

We will use CSS transform and box-shadow for adding this effect to images.

Mountain.

Lights.

Example

<style>
body {
padding: 30px;
background-color: #f2f2f2;
}

.polaroid {
width: 284px;
padding: 10px 10px 20px 10px;
border: 1px solid #e6e6e6;
background-color: white;
box-shadow: 10px 10px 10px #e6e6e6;
}

div.rotate_right {
float: left;
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Safari */
transform: rotate(7deg);
}

div.rotate_left {
float: left;
-ms-transform: rotate(-8deg); /* IE 9 */
-webkit-transform: rotate(-8deg); /* Safari */
transform: rotate(-8deg);
}
</style>

<div class="polaroid rotate_right">
<img src="img_5terre.jpg" alt="Mountain" width="284" height="213">
<p class="caption">Mountain.</p>
</div>

<div class="polaroid rotate_left">
<img src="img_lights.jpg" alt="Lights" width="284" height="213">
<p class="caption">Lights.</p>
</div>

Example Explained

• <meta name="viewport" content="width=device-width, initial-scale=1.0"> - This Sets the viewport to the same as device width.
• .polaroid { width: 284px; padding: 10px 10px 20px 10px; border: 1px solid #e6e6e6; background-color: white; box-shadow: 10px 10px 10px #e6e6e6; } - This styles the Image by adding some padding, border, background color and box shadow.
• div.rotate_right { float: left; -ms-transform: rotate(7deg); /* IE 9 */ -webkit-transform: rotate(7deg); /* Safari */ transform: rotate(7deg); } - This rotate the image by 7deg from its normal position. This will add some scattering on images on table effect.
• div.rotate_left { float: left; -ms-transform: rotate(-8deg); /* IE 9 */ -webkit-transform: rotate(-8deg); /* Safari */ transform: rotate(-8deg); } - This rotate the image by -8deg from its normal position. This will add some scattering on images on table effect.

• The float: left will position the images next to each other.
• The -ms- and -webkit- prefix is added for supporting CSS styles on older browsers.