Easy Image gallery II by CSS 3.0
15-05-2017    182 times
Advance Responsive Photo Gallery CSS

Advance Responsive Photo Gallery through CSS

Today’s web designing is not limited only for the desktop. All the designers should be very careful about the device in which your website may open. Most of the case users are open the website in the desktop but most advance users open the same site in their tab or mobile sets. But ordinary web pages are cannot scale itself into various devices. We must size all the elements in the page by the ratio of it container.

Her we create a simple photo gallery. This will open in every device with the same format.

Tutorial at home

Html Code

<html>
<head>
<title> Advance Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="advPhotoGallery.css" />
</head>
<body>
<div class="container">
<h2> Advance Photo Gallery</h2>
<div class="box dropdown">
<img src="1.jpg" width="100%" />
<div class="dropdown-element">
<img src="1.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="2.jpg" width="100%" />
<div class="dropdown-element">
<img src="2.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="3.jpg" width="100%" />
<div class="dropdown-element">
<img src="3.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="4.jpg" width="100%" />
<div class="dropdown-element">
<img src="4.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="5.jpg" width="100%" />
<div class="dropdown-element">
<img src="5.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

Tutorial at home
Tutorial at home

<div class="box dropdown">
<img src="6.jpg" width="100%" />
<div class="dropdown-element">
<img src="6.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="7.jpg" width="100%" />
<div class="dropdown-element">
<img src="7.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="8.jpg" width="100%" />
<div class="dropdown-element">
<img src="8.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="9.jpg" width="100%" />
<div class="dropdown-element">
<img src="9.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="10.jpg" width="100%" />
<div class="dropdown-element">
<img src="10.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="11.jpg" width="100%" />
<div class="dropdown-element">
<img src="11.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="12.jpg" width="100%" />
<div class="dropdown-element">
<img src="12.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="13.jpg" width="100%" />
<div class="dropdown-element">
<img src="13.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="14.jpg" width="100%" />
<div class="dropdown-element">
<img src="14.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

Tutorial at home

<div class="box dropdown">
<img src="15.jpg" width="100%" />
<div class="dropdown-element">
<img src="15.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="16.jpg" width="100%" />
<div class="dropdown-element">
<img src="16.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="17.jpg" width="100%" />
<div class="dropdown-element">
<img src="17.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="18.jpg" width="100%" />
<div class="dropdown-element">
<img src="18.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="19.jpg" width="100%" />
<div class="dropdown-element">
<img src="19.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

<div class="box dropdown">
<img src="20.jpg" width="100%" />
<div class="dropdown-element">
<img src="20.jpg" width="300" />
<div class="desc">Caption</div>
</div>
</div>

</div>
</body>
</html>

Advance Responsive Photo Gallery
Advance Responsive Photo Gallery

Css Code

@charset "utf-8";

body
{
background-color:gray;
}
.container
{
width:76%;
left:12%;
position:relative;
background-color:white;
height:800px;
}
*
{
box-sizing:border-box;
}
.box
{
border-style:solid;
border-width:1px;
border-color:#A6A6A6;
padding:5px;
float:left;

Tutorial at home
Tutorial at home

width:10%;
}
.dropdown
{
position:relative;
display:inline-block;
}
.dropdown-element
{
display:none;
position:absolute;
background-color:white;
box-shadow:8px 8px 8px 8px rgba(255,0,0,0.3);
z-index:1;
}

.dropdown:hover .dropdown-element
{
display:block;
}

.desc
{
padding:15px;
text-align:center;
}

Video Tutorials

freenotes
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post