Accordion Image Gallery with HTML & CSS

Accordion Image Gallery with HTML & CSS (Free Code)

In this article, you will learn how to create an accordion image gallery using html and css. Here I will share how to make an accordion with image and text.

css accordion image gallery you can easily create if you know basic html and css. I did not use any JavaScript to create this Image Accordion Gallery. If you are looking for the best logo design web design platform then you can take the help of Designlab.

Accordion Image Gallery with HTML & CSS

There are many tutorials on the internet for Accordion Style Responsive Photo Gallery. However, JavaScript is used in them. But I didn’t use any javascript in this design. This accordion with image and text is made entirely by html and css. 

Accordion Image Gallery HTML CSS

An accordion image gallery is a great way to showcase a collection of images in a compact and organized way. 

It is a responsive design that allows for easy navigation and browsing of images. In this article, we will show you how to create an accordion image gallery using HTML and CSS.

See the Pen accordion image gallary by ahmed mohsen (@ahmedcyber) on CodePen.

As you can see above, this is a simple HTML Accordion Image Gallery. Here I have used five images. Normally the images will be of equal width. When you hover over any image, that image can be viewed in a larger size.

Similarly, when you hover over another image, all other images will become smaller and that image will become larger.

Create Image Accordion Gallery with HTML & CSS

Now let’s learn how to create this css accordion image gallery with HTML and CSS. For this I first created a basic structure using HTML into which we added the images. Then designed it with css.

Here I have given all to create this project (How to Create Image Accordion using HTML and CSS). You just create an html and css file and copy and paste the following codes into your file.

Step 1: Accordion Image Gallery HTML

To create an accordion image gallery, we need to start with the HTML structure. We will create a container div with a class of “accordion”. Inside this container, we will create a set of divs, each representing a single image.

				
					<div class="accordian">
	<ul>
		<li>
			<div class="image_title">
				<a href="#">KungFu Panda</a>
			</div>
			<a href="#">
				<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNjQwIDMyMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="320" decoding="async" data-src="http://thecodeplayer.com/uploads/media/3yiC6Yq.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Toy Story 2</a>
			</div>
			<a href="#">
				<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNjQwIDMyMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="320" decoding="async" data-src="http://thecodeplayer.com/uploads/media/40Ly3VB.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Wall-E</a>
			</div>
			<a href="#">
				<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNjQwIDMyMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="320" decoding="async" data-src="http://thecodeplayer.com/uploads/media/00kih8g.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Up</a>
			</div>
			<a href="#">
				<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNjQwIDMyMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="320" decoding="async" data-src="http://thecodeplayer.com/uploads/media/2rT2vdx.jpg"/>
			</a>
		</li>
		<li>
			<div class="image_title">
				<a href="#">Cars 2</a>
			</div>
			<a href="#">
				<img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2NDAiIGhlaWdodD0iMzIwIiB2aWV3Qm94PSIwIDAgNjQwIDMyMCI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" width="640" height="320" decoding="async" data-src="http://thecodeplayer.com/uploads/media/8k3N3EL.jpg"/>
			</a>
		</li>
	</ul>
</div>

Step 2: Accordion Image Gallery CSS

Now it’s time to design this accordion image gallery. Now that we have our HTML structure in place, we can use CSS to style it. 

We will start by giving the accordion container a width of 100% and a max-width of 800px. This will ensure that the gallery is responsive and will adapt to different screen sizes.

				
					* {
	margin: 0; 
	padding: 0;
}
body {
	background: #ccc; 
	font-family: arial, verdana, tahoma;
}

.accordian {
	width: 805px; height: 320px;
	overflow: hidden;
	margin: 100px auto;
	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}

.accordian ul {
	width: 2000px;
}

.accordian li {
	position: relative;
	display: block;
	width: 160px;
	float: left;
	
	border-left: 1px solid #888;
	
	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
	
	/*Transitions to give animation effect*/
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

/*Reduce with of un-hovered elements*/
.accordian ul:hover li {width: 40px;}

.accordian ul li:hover {width: 640px;}


.accordian li img {
	display: block;
}

/*Image title styles*/
.image_title {
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0; bottom: 0;	
width: 640px;	

}
.image_title a {
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 20px;
	font-size: 16px;
}

Hope you got to know how I made this accordion image gallery html css from the tutorial. In conclusion, an accordion image gallery is a great way to showcase a collection of images in a compact and organized way.

By following the steps outlined in this article, you should be able to create your own HTML CSS accordion image gallery and customize it to suit your needs. If you want the source code of this Image Accordion Gallery then use the download button below.

Source Code
Tags: