×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Responsive Image Gallery Different CSS3 Text Box styling
Easy Image gallery II by CSS 3.0 - CSS 3.0
2650    Arnab De    15/05/2017

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.

softetechnologies

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>

softetechnologies

<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>

softetechnologies

<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;

softetechnologies

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

Responsive Image Gallery Different CSS3 Text Box styling
softetechnologies
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.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
If the poor cannot come to education, education must reach them, at the plough, in the bakery factor
Swami Vivekananda
1943
66.09
Today So Far
Total View (Lakh)
softetechnologies
26/05/2018     48310
25/06/2018     40335
01/01/2018     39790
28/06/2017     37666
02/08/2017     36402
01/08/2017     30652
06/07/2017     30398
15/05/2017     29850
14/07/2017     25833
11/09/2018     25308
softetechnologies