Create a simple Image Gallery In CSS3 and Javascript

Create a simple Image Gallery In CSS3 and Javascript

In this article, we will discuss that how we can create an image gallery in CSS3 and Javascript and put some beautiful animation it.

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

IE9 and eariler version can't support the transition property which I will mention in our program.

In this program when we will be put our mouse over on some image, the image will be rotate on the 360 deg angle and information regarding that Image will be shown just like this:

Step1: First we will take 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>

Step2: Now we will take an Image and a Table to show the data when we put our mouse over on 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>

Step3: 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 starting to the end.

Step4: 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 on the image it will be rotate on 360 deg.

Step5: Now we will be write the code for set the position of the images like this, Here we use the rotate property to rotate the images in the particular 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;}

Step6: Now we will write the javascript code so when we put our mouse over on 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 on 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>

Video: