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.
|
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.
|
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.
Hello shaan, can you please design a responsive dropdown navigation bar with logo. Please help
Sure, Tomorrow I will post. Thanks for your recommendation.
Thank you so much. You are so helpful person…….
Hi shaan, will you please design a responsive points tally with html, css & js
Sorry bro, I did not get it, Can you please explain what thing you are talking about.
Points table
Hi shaan!
hello, how can I help you?
Points table