In this post I'm going to explain to you how you can create a beautiful image collection in a tabular form with the help of CSS. But only tabular form of images sounds a little bit boring. So we will also make the images rotate and change opacity when we hover mouse over them. We will use the <div>s to make it work. You will actually feel how easy it is to make a very creative image table.Let's see how our basic structure looks:
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS */
</style>
</head>
<body>
<!--Contents-->
</body>
</html>
Now let's style everything:
First of all we will style our <div>. We will define height, width, display, transition and background for the <div>. We have to keep one thing in mind that we the placing our image in the div, so the image size should be equal to div size because if it is not so, then the rotatory motion may look as revolutionary motion.
<style>
div
{
margin-right: 10px; /* As our images will go from left to right*/
display: inline-block;
width:150px;
height:113px;
background:transparent;
transition:width 2s, height 2s, transform 2s;
-webkit-transition:width 2s, height 2s, -webkit-transform 2s; /* Safari */
}
Now we are going to style the <div>'s on-hover effect. Here we have to keep in mind that <div> is an empty division of the body, so it can not change opacity (since its transparent). We have to make is rotate. Place the following code below the earlier codes in the <style> section.
div:hover
{
transform:rotate(360deg);
-webkit-transform:rotate(360deg); /* Safari */
}
Now final styling. We are going to style our image and set on-hover effect. As we have earlier set the rotation effect to the div, so now we have to only set the opacity to the image.
img
{
opacity:0.7;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
Make sure you put these all codes inside the <style>--</style> and put <style>--</style> in <head>--</head>. Okay, let's move on.
Time to put the images inside the <div>s.
We will do it in the following way:
<div>
<img src="URL" alt="Alternate Text">
</div>
Make sure to put the <div>s inside the <body>--</body>.
Result Time!
Before hovering, the images will have 70% opacity and after hovering, the images will have 100% opacity and will rotate. I've used the align="center" for the body tag to make everything center aligned and put <br> after first three <div>s then after two <div>s then after the last <div> to give it an upside down pyramid shape.
 |
| Before Mouse Hovering |
 |
| After Mouse Hovering |
