BEST PHOTOGALLARY SECTION IN HTML & CSS WITH SOURCE CODE
bootstrap responsive photogallary section here full source code using html and css.
In this tutorila I will be teach you how to make a best photogallary section in html & css.
All source codes are under some lines. You can copy and pest it in your index file.
this design is about photogallary section. New web designer and fresher in this field are a lot of question that how to make design beautiful and how to make it propper responsive in short time. This tutorial is a inspiration tutorial for web designers
About the design
let's talk about this section, I used html & css & bootstrap to complete for this section.Hover effect is used to make it more beautiful . By transition effect It became more smooth. Bootsrap cdn links also used in this project. By bootstrap, this section is designer tottlay responsive for all devices. A mobile friendly website is looked like a proffessional website.
Grid system used to make it more passionate it. If you are a fresher then I suggest to you that you should learn BOOTSRAP. Bootsrap provides you to the source files of css and javascript. By these files, Your website will be ready more beautifull and responsive in a less time.
when the user will take cursor on images then you will be see hover effetcs in it.
How to use these codes
1. index.html
make a file named by index.html
then simple write html5 start to last their tags codeslike
<!DOCTYPE html>
<html lang="en">
<head>
<title>photogallary section</title>
<link rel="icon" type="image/jpg" href="image/team-6.jpg" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
</head>
<body>
<!----------------PHOTOGALLRY SECTION-------------->
pest html code
<!----------------PHOTOGALLRY SECTION-------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
2. HTML CODE SECTION
Second step is that make html code to and pest it in body section of index.html file.
<section id="photogallary">
<div class="section-title text-center">
<h2>Services</h2>
<p>Check out the great services we offer</p>
</div>
<div class="container">
<div class="row">
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
bootstrap responsive photogallary section here full source code using html and css.
In this tutorila I will be teach you how to make a best photogallary section in html & css.
All source codes are under some lines. You can copy and pest it in your index file.
this design is about photogallary section. New web designer and fresher in this field are a lot of question that how to make design beautiful and how to make it propper responsive in short time. This tutorial is a inspiration tutorial for web designers
About the design
let's talk about this section, I used html & css & bootstrap to complete for this section.Hover effect is used to make it more beautiful . By transition effect It became more smooth. Bootsrap cdn links also used in this project. By bootstrap, this section is designer tottlay responsive for all devices. A mobile friendly website is looked like a proffessional website.
Grid system used to make it more passionate it. If you are a fresher then I suggest to you that you should learn BOOTSRAP. Bootsrap provides you to the source files of css and javascript. By these files, Your website will be ready more beautifull and responsive in a less time.
when the user will take cursor on images then you will be see hover effetcs in it.
How to use these codes
1. index.html
make a file named by index.html
then simple write html5 start to last their tags codeslike
<!DOCTYPE html>
<html lang="en">
<head>
<title>photogallary section</title>
<link rel="icon" type="image/jpg" href="image/team-6.jpg" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
</head>
<body>
<!----------------PHOTOGALLRY SECTION-------------->
pest html code
<!----------------PHOTOGALLRY SECTION-------------->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" ></script>
</body>
</html>
2. HTML CODE SECTION
Second step is that make html code to and pest it in body section of index.html file.
<section id="photogallary">
<div class="section-title text-center">
<h2>Services</h2>
<p>Check out the great services we offer</p>
</div>
<div class="container">
<div class="row">
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-md-3 col-sm-12 col-12 crl">
<div class="box">
<div class="imgBox">
<img src="give image location with name">
</div>
<div class="details">
<div class="detail-content">
<h2>ravish</h2>
<p>Helo friends I am a new wedesigner and developer. I will be teach about all webdesign tricks and tips
I will be provide new sourcecode everyday daily</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
3. CSS code
Now we have to decorate this photogallary section.
copy the text & pest it in head section of index.html after that you will be find a amazing photogallary section for you web page.
<style type="text/css">
/*-----------------------------photogallry----------------------*/
#photogallary{
margin:0px;
padding:0px;
padding: 50px;
font-family: 'Noto Serif', serif;
overflow:hidden;
background:whitesmoke;
color: white;
}
#photogallary .container{
height: initial;
}
#photogallary .crl{
margin: 0px;
width: 100%;
padding:0px;
}
#photogallary .box{
position: relative;
height:250px;
box-sizing: border-box;
margin: 0px;
}
#photogallary .box .imgBox{
position: relative;
overflow: hidden;
height: 250px;
}
#photogallary .box .imgBox img{
width: 100%;
height: 100%;
transition: transform 2s;
}
#photogallary .box:hover .imgBox img{
transform: scale(1.2);
}
#photogallary .box .details{
position: absolute;
top:10px;
left: 10px;
bottom: 10px;
right: 10px;
background: rgba(0,0,0,0.8);
transform: scaleY(0);
transition: transform .5s;
}
#photogallary .box:hover .details{
transform: scaleY(1);
}
#photogallary .box .details .detail-content{
position: absolute;
top:50%;
transform: translateY(-50%);
}
#photogallary .box .details h2{
color: #ff0;
font-size: 20px;
}
</style>
No comments:
Post a Comment
thanks for your comments