How to create a modern vertical image column gallery Using HTML & CSS? Solution: CSS Vertical Image Column Expand On Hover, Pure HTML CSS Gallery.

Nowadays most people use different types of stylish image gallery. There are many kinds of gallery available, slider type, sliding lightbox, auto-animated, etc. Every week you can see a new type of image gallery. So, it depends totally on developers, how good their creativity is. In other words, a creative developer creates an amazing thing.

Yesterday I saw on a well-known website, they use a vertical column layout for showing their popular post. They used jQuery but I will show you how we can create with only HTML & CSS. So, Today I am sharing CSS Vertical Image Column Expand On Hover program. Basically, there are some images in column style. When we hover on any column, that will expand to the full image.

This program is all about width property. If you know CSS properly, then you can create this easily. That is a very basic but pretty good image gallery. Previously I shared an Image Gallery With 3D Effect, but today’s concept is to create an expandable vertical image column. This program has fewer lines of codes, a beginner can understand the program easily.

If you don’t get what is the actual program, I am talking about. Then see the preview given below.

Preview Of Pure HTML CSS Expandable Gallery

See this video preview to getting an idea of how this program actually is.

Now you can see how the program looks like. If you like this, then get the source code of its.

You May Also Like:

CSS Vertical Image Column Source Code

Before sharing source code, let’s talk about this program. As you know this program is without javascript. This CSS Vertical Image Column, which Expands on Hover effect using pure CSS & HTML. This program is all about using CSS position (info) and hover property. I had put some external image link in this program, you can use local images by giving the path.

For creating this program, you have to create only 2 files. One for HTML and one for CSS. Follow the steps to create this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

index.html <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset="UTF-8"> <title>Css Vertical Image Column | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <ul> <li> <span>Beach</span> <img src="https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" /></li> <li> <span>Mountain</span> <img src="https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg" /></li> <li> <span>Hills</span> <img src="https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" /></li> <li> <span>Island</span> <img src="https://images.pexels.com/photos/248771/pexels-photo-248771.jpeg" /> </li> <li> <span>Nature</span> <img src="https://images.pexels.com/photos/145685/pexels-photo-145685.jpeg" /> </li> </ul> </body> </html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 <!DOCTYPE html> <!-- code by webdevtrick ( https://webdevtrick.com ) --> <html> <head> <meta charset = "UTF-8" > <title> Css Vertical Image Column | Webdevtrick.com </title> <link rel = "stylesheet" href = "style.css" > </head> <body> <ul> <li> <span> Beach </span> <img src = "https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg" /> </li> <li> <span> Mountain </span> <img src = "https://images.pexels.com/photos/443446/pexels-photo-443446.jpeg" /> </li> <li> <span> Hills </span> <img src = "https://images.pexels.com/photos/346529/pexels-photo-346529.jpeg" /> </li> <li> <span> Island </span> <img src = "https://images.pexels.com/photos/248771/pexels-photo-248771.jpeg" /> </li> <li> <span> Nature </span> <img src = "https://images.pexels.com/photos/145685/pexels-photo-145685.jpeg" /> </li> </ul> </body> </html>

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

style.css /* code by webdevtrick ( https://webdevtrick.com ) */ *, *:after, *:before { padding:0; margin:0; font-family:Arial; } ul { position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; list-style:none; width:955px; height:450px; border-radius:3px; overflow:hidden; box-shadow:1px 1px 3px 1px; } li { position:relative; width:190px; height:450px; float:left; border-left:1px solid white; transition:all 0.7s; box-shadow:-2px 0 10px 2px; } ul li:first-child { border:none; } span { display:block; position:absolute; bottom:0; width:50%; color:white; white-space:nowrap; padding:20px; background: linear-gradient(to right, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); font-weight: 700; } img { width:800px; height:450px; } ul:hover li { width:50px; } ul li:hover { width:750px; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 /* code by webdevtrick ( https://webdevtrick.com ) */ *, *:after, *:before { padding : 0 ; margin : 0 ; font-family : Arial ; } ul { position : absolute ; top : 0 ; bottom : 0 ; left : 0 ; right : 0 ; margin : auto ; list-style : none ; width : 955px ; height : 450px ; border-radius : 3px ; overflow : hidden ; box-shadow : 1px 1px 3px 1px ; } li { position : relative ; width : 190px ; height : 450px ; float : left ; border-left : 1px solid white ; transition : all 0.7s ; box-shadow : -2px 0 10px 2px ; } ul li:first-child { border : none ; } span { display : block ; position : absolute ; bottom : 0 ; width : 50% ; color : white ; white-space : nowrap ; padding : 20px ; background : linear-gradient ( to right, rgba ( 0,0,0,0.65 ) 0%,rgba ( 0,0,0,0 ) 100% ) ; font-weight : 700 ; } img { width : 800px ; height : 450px ; } ul:hover li { width : 50px ; } ul li:hover { width : 750px ; }

That’s It. Now you have successfully created a CSS Vertical Image Column with expanding on hover effect. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.