Home Web Design CSS CSS Vertical Image Column Expand On Hover | Pure HTML CSS Gallery

CSS Vertical Image Column Expand On Hover | Pure HTML CSS Gallery

May 22, 2019

10288

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.

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Css Vertical Image Column | Webdevtrick.com</title>

</head>

<body>

<ul>

<li>

Beach

<li>

Mountain

<li>

Hills

<li>

Island

</li>

<li>

Nature

</li>

</ul>

</body>

</html>

style.css

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

/* 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;
}

/* 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.

9 COMMENTS

Tarun May 22, 2019 At 5:34 pm

Hello shaan, can you please design a responsive dropdown navigation bar with logo. Please help

Reply
- shaan May 22, 2019 At 5:41 pm
  
  Sure, Tomorrow I will post. Thanks for your recommendation.
  
  Reply
Tarun May 23, 2019 At 4:26 am

Thank you so much. You are so helpful person…….

Reply
Sourabh May 31, 2019 At 3:24 pm

Hi shaan, will you please design a responsive points tally with html, css & js

Reply
- shaan May 31, 2019 At 3:32 pm
  
  Sorry bro, I did not get it, Can you please explain what thing you are talking about.
  
  Reply
  - Sourabh June 1, 2019 At 5:09 am
    
    Points table
    
    Reply
    - Sourabh June 2, 2019 At 4:26 am
      
      Hi shaan!
      
      Reply
      - shaan June 2, 2019 At 4:35 am
        
        hello, how can I help you?
Sourabh June 1, 2019 At 5:11 am

Points table

Reply

CSS Vertical Image Column Expand On Hover | Pure HTML CSS Gallery

Preview Of Pure HTML CSS Expandable Gallery

CSS Vertical Image Column Source Code

9 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

Free PHP, HTML, CSS, JavaScript/TypeScript editor – CodeLobster IDE

Unique Uses for Blockchain Technology

JavaScript Progress Clock | Day, Hour, Minute, Second, Progression

POPULAR CATEGORY