Image Art Gallery using Html/CSS3 Tutorial
The CSS Image Gallery allows you to make pure CSS photos and slides with smooth image transitions and quick scrolling. As a result, you may alter the look of your website using CSS. The galleries adheres to the most recent modern web, ensuring that photos are always visible even if viewers do not have JavaScript installed. 😉
Since it might display images, art, and other visual resources, a photo gallery . this curated is a particularly valuable feature of a site. This can be useful for designers who want to show off their photography or artistic resources, writers who would like to post a few of their images, travellers who want to share images from the latest visit, as well as other similar goals.
In this blog, I am going to show how to Create a simple Image Art Gallery using Html5 and Css3. CSS was used to construct the picture gallery in the sample below. Likewise:
Step 01: Open NotePad.
First, we need to create an Html Document using NotePad. First Open Notepad and Declare Html Layout For your Gallery.
Step 02: Save File
Step 03: Change Extention from .txt to .html
Step 04: Copy Code for Image Art Gallery
<!DOCTYPE html>
<html>
<head>
<title>My Image Art Gallery</title>
<meta charset=”utf-8” />
<style>
div.ArtGallery {
border: 1px solid grey;
}
div.ArtGallery:hover {
border: 1px solid black;
}
div.ArtGallery img {
width: 100%;
height: auto;
}
div.dsc {
padding: 15px;
text-align: right;
}
* {
box-sizing: border-box;
}
.resp {
padding: 0 6px;
float: left;
width: 25%;
}
@media only screen and (max-width: 700px) {
.resp {
width: 50%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.resp {
width: 100%;
}
}
.clear:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body class="ImageGallery">
<h2>Welcome to My Image Gallery</h2>
<div class="resp">
<div class="ArtGallery">
<a target="_blank"
href="https://images.pexels.com/photos/2486168/pexels-photo-2486168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img src="https://images.pexels.com/photos/2486168/pexels-photo-2486168.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Landslide Summer" width="600" height="300">
</a>
<div class="dsc"> Image Art Gallery description </div>
</div>
</div>
<div class="resp">
<div class="ArtGallery">
<a target="_blank"
href="https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img src="https://images.pexels.com/photos/1624496/pexels-photo-1624496.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Landslide Summer" width="600" height="300">
</a>
<div class="dsc"> Image Art Gallery description </div>
</div>
</div>
<div class="resp">
<div class="ArtGallery">
<a target="_blank"
href="https://images.pexels.com/photos/1535162/pexels-photo-1535162.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img src="https://images.pexels.com/photos/1535162/pexels-photo-1535162.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Landslide Summer" width="600" height="300">
</a>
<div class="dsc"> Image Art Gallery description </div>
</div>
</div>
<div class="resp">
<div class="ArtGallery">
<a target="_blank"
href="https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500">
<img src="https://images.pexels.com/photos/1624438/pexels-photo-1624438.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"
alt="Landslide Summer" width="600" height="300">
</a>
<div class="dsc"> Image Art Gallery description </div>
</div>
</div>
<div class="clear"></div>
</body>
</html>
Results:
A portfolio can become responsive judging by the size of the user's mobile device screen or even the browser window used by the user, as we described in the previous rows. We utilize media queries, which are applied to CSS in the style> section, to make the portfolio responsive.
You must note that the portfolio must be defined as a different class in order to be responsive.
Comments
Post a Comment