Image Gallery With CSS3 and JavaScript

Mahak Gupta
May 20, 2013
6.3k
0
0
Article

imagegallery.html.zip|Video.zip

This example will be work properly in IE10, Firefox, Opera, Chrome and Safari.

IE9 and eariler versions of IE don't support the transition property used in the program.

In this program, when we hover the mouse over an image, the image will be rotated on the 360 deg angle and the information regarding that image will be shown just like this:

Step 1: First we will use some images like this:

<div id="MyGallery">
     <div id="img1">
         <img src="1.jpg" width="200px" height="200px" onmouseover="ShowImage1()">
         <a>First Baby</a>
     </div>
     <div id="img2">
         <img src="2.jpg" width="200px" height="200px" onmouseover="ShowImage2()">
         <a>Second baby</a>
     </div>
     <div id="img3">
         <img src="3.jpg" width="200px" height="200px" onmouseover="ShowImage3()">
         <a>Third Baby</a>
     </div>
     <div id="img4">
         <img src="4.jpg" width="200px" height="200px" onmouseover="ShowImage4()">
         <a>Forth Baby</a>
     </div>
     <div id="img5">
         <img src="5.jpg" width="200px" height="200px" onmouseover="ShowImage5()">
         <a>Fifth Baby</a>
     </div>
     <div id="img6">
         <img src="6.jpg" width="200px" height="200px" onmouseover="ShowImage6()">
         <a>Sixth Baby</a>
     </div>
     <div id="img7">
         <img src="7.jpg" width="200px" height="200px" onmouseover="ShowImage7()">
         <a>Seventh Baby</a>
     </div>
     <div id="img8">
         <img src="8.jpg" width="200px" height="200px" onmouseover="ShowImage8()">
         <a>Eight Baby</a>
     </div>
</div>

Step 2: Now we will use an image and a table to show the data when we hover our mouse over the image.

<div id="img9">
     <img id="imgmain" style="display: none;" width="250px" height="250px">
     <br />
     <br />
     <br />
     <table id="table1" style="display: none;">
         <tr>
             <td style="font-size: Large; font-weight: bold; color: Brown; font-style: Italic;">Name :</td>
             <td style="font-size: Large; color: Brown;">
                 <p id="pname"></p>
             </td>
             <tr>
         <tr>
             <td style="font-size: Large; font-weight: bold; color: Brown; font-style: Italic;">Age :</td>
             <td style="font-size: Large; color: Brown;">
                 <p id="page"></p>
             </td>
             <tr>
         <tr>
             <td style="font-size: Large; font-weight: bold; color: Brown; font-style: Italic;">Mother's Name :</td>
             <td style="font-size: Large; color: Brown;">
                 <p id="pmothername"></p>
             </td>
             <tr>
         <tr>
             <td style="font-size: Large; font-weight: bold; color: Brown; font-style: Italic;">Father's Name :</td>
             <td style="font-size: Large; color: Brown;">
                 <p id="pfathername"></p>
             </td>
             <tr>
     </table>
</div>

Step 3: Now we will set the style of our gallery; first we set the style of the main div like this:

#MyGallery {
margin: 20px auto;
padding: 40px;
position: relative;}
#MyGallery div {
background: pink;
position: absolute;
overflow: hidden;
opacity: 0.6;
transition: all 1500ms linear;
-webkit-transition: all 1500ms linear;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

Here we will set the transition property like this:

-webkit-transition: all 1500ms linear;

It specifies that transition effect duration will be 1500ms and the linear property specifies that the transition effect has the same speed from the start to the end.

Step 4: Now we will write the code for the rotation of the div like this:

#MyGallery div#img1:hover,
#MyGallery div#img2:hover,
#MyGallery div#img3:hover,
#MyGallery div#img4:hover,
#MyGallery div#img5:hover,
#MyGallery div#img6:hover,
#MyGallery div#img7:hover,
#MyGallery div#img8:hover {
z-index: 999;
/* Safari */
-webkit-transform: rotate(360deg);
/* Firefox */
-moz-transform: rotate(360deg);
/* IE */
-ms-transform: rotate(360deg);
/* Opera */
-o-transform: rotate(360deg);
opacity: 1;}

Here we will specify that when we put our mouse over an image it will be rotated 360 degrees.

Step 5: Now we will write the code to set the position of the images like this. Here we use the rotate property to rotate the images at the specified angle like this:

#MyGallery #img1 {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
top: 30px;
left: 100px;
z-index:1;}
#MyGallery #img2 {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
top: 60px;
left:300px;
z-index:3;}
#MyGallery #img3 {
-webkit-transform: rotate(40deg);
-moz-transform: rotate(40deg);
top: 90px;
left:410px;
z-index:6;}
#MyGallery #img4 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
top: 120px;
left: 270px;
z-index:9;}
#MyGallery #img5 {
top: 180px;
left: 110px;
z-index:12;}
#MyGallery #img6 {
-webkit-transform: rotate(-15deg);
top: 190px;
-moz-transform: rotate(-15deg);
left: 360px;
z-index:14;}
#MyGallery #img7 {
-webkit-transform: rotate(15deg);
-moz-transform: rotate(15deg);
top: 210px;
left: 280px;
z-index:14;}
#MyGallery #img8 {
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
top: 250px;
left: 500px;
z-index:14;}
#MyGallery #img9 {
top: 10px;
left: 850px;
z-index:14;}

Step 6: Now we will write the JavaScript code for when the mouse hovers over the image the table will show the information:

<img src="1.jpg" width="200px" height="200px" onmouseover="ShowImage1()">

JavaScript code:

<script language="javascript">
     function ShowImage1() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '1.jpg';
         document.getElementById('pname').innerHTML = 'Khyati Zindal';
         document.getElementById('page').innerHTML = '5';
         document.getElementById('pmothername').innerHTML = 'Anjana';
         document.getElementById('pfathername').innerHTML = 'Abhinav';
     }
</script>

Here we set the display property of the table so it will be visible when we will put our mouse over the image. Here we also set the source of the image and set the data in the <p> tags. So the output will be:

<script language="javascript">
     function ShowImage1() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '1.jpg';
         document.getElementById('pname').innerHTML = 'Khyati Zindal';
         document.getElementById('page').innerHTML = '5';
         document.getElementById('pmothername').innerHTML = 'Anjana';
         document.getElementById('pfathername').innerHTML = 'Abhinav';
     }
     function ShowImage2() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '2.jpg';
         document.getElementById('pname').innerHTML = 'Megha';
         document.getElementById('page').innerHTML = '4';
         document.getElementById('pmothername').innerHTML = 'Girja';
         document.getElementById('pfathername').innerHTML = 'Yogesh';
     }
     function ShowImage3() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '3.jpg';
         document.getElementById('pname').innerHTML = 'Mahak Garg';
         document.getElementById('page').innerHTML = '4';
         document.getElementById('pmothername').innerHTML = 'Manju';
         document.getElementById('pfathername').innerHTML = 'Arun';
     }
     function ShowImage4() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '4.jpg';
         document.getElementById('pname').innerHTML = 'Abhinav';
         document.getElementById('page').innerHTML = '3';
         document.getElementById('pmothername').innerHTML = 'Manju';
         document.getElementById('pfathername').innerHTML = 'Arun';
     }
     function ShowImage5() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '5.jpg';
         document.getElementById('pname').innerHTML = 'Meghal';
         document.getElementById('page').innerHTML = '5';
         document.getElementById('pmothername').innerHTML = 'Kusum';
         document.getElementById('pfathername').innerHTML = 'Anil';
     }
     function ShowImage6() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '6.jpg';
         document.getElementById('pname').innerHTML = 'Pratyaksh';
         document.getElementById('page').innerHTML = '3';
         document.getElementById('pmothername').innerHTML = 'Rekha';
         document.getElementById('pfathername').innerHTML = 'Narendra';
     }
     function ShowImage7() {
         document.getElementById('table1').style.display = 'block'; document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '7.jpg';
         document.getElementById('pname').innerHTML = 'Miya';
         document.getElementById('page').innerHTML = '3';
         document.getElementById('pmothername').innerHTML = 'Kate';
         document.getElementById('pfathername').innerHTML = 'John';
     }
     function ShowImage8() {
         document.getElementById('table1').style.display = 'block';
         document.getElementById('imgmain').style.display = 'block';
         document.getElementById('imgmain').src = '8.jpg';
         document.getElementById('pname').innerHTML = 'Nidhi';
         document.getElementById('page').innerHTML = '4';
         document.getElementById('pmothername').innerHTML = 'Nimi';
         document.getElementById('pfathername').innerHTML = 'Rakesh';
     }
</script>