Home Web Design CSS CSS Rhombus Image Grid With Hover Effect | Scale Image On Hover

CSS Rhombus Image Grid With Hover Effect | Scale Image On Hover

December 7, 2019

6529

How we can create image grids with rhombus shape layout? Solution: See this CSS Rhombus Image Grid With Hover Effect, Scale Image On Hover.

Previously I have shared grid-based programs, but this gird layout is with rhombus shape on square or rectangle. Basically, photos are on websites like on portfolio, gallery, etc they are arranged in a layout. Most of the image sections of websites are based on the masonry grid layout. All these styles we can create using only HTML & CSS.

Today you will learn to create an image gallery layout with scale image on hover effect. Basically, there are 10 images with rhombus shape and also align like a rhombus. Let me tell A Rhombus is a flat shape with 4 equal straight sides and it looks like a diamond. And when you will hover on the images, then it will expand.

So, Today I am sharing CSS Rhombus Image Grids With Hover Effect. There I have used pure HTML and CSS for creating this grid-based layout and there are no JS or any other library. The whole design is based on a few simple CSS commands. And this will be a good practice of HTML and CSS for beginners, also you can use it on your project.

If you are thinking now how this image grid actually is, the see the preview given below.

Preview Of Image Grid Items With Scale On Hover

See this video preview to getting an idea of how this rhombus grid looks like.

https://webdevtrick.com/wp-content/uploads/rohmbus-image-grid.mp4?_=1

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

CSS Rhombus Image Grid With Hover Effect Source Code

Before sharing source code, let’s talk about it. First I have created a main div and placed 10 images inside it using HTML <img> tag. All these images are random it can be changed in a refresh, images are powered by Unsplash which is a dummy image provider. In the HTML file, I have linked the CSS file.

Now using CSS I have placed all the items in the right place, as you can see in the preview. For body tag, I gave flex display using display: flex; command and in the main or container div I put display: grid; . There I have used a max height and width and other grid commands like row and column. For creating the rhombus shape I have used CSS clip-path command with polygon values.

And many more basic commands are in the CSS file. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create only 2 files, one for HTML and one for CSS. Follow the steps to creating this design without any error.

index.html

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

<!DOCTYPE html>
<!-- Code By Webdevtrick ( https://webdevtrick.com ) -->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Rhombus Grid Image | Webdevtrick.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="style.css">

</head>
<body>

<div class="contaniner">
  <img src="https://source.unsplash.com/random/600x600?water" alt="">
  <img src="https://source.unsplash.com/random/600x600?summer" alt="">
  <img src="https://source.unsplash.com/random/600x600?plants" alt="">
  <img src="https://source.unsplash.com/random/600x600?snow" alt="">
  <img src="https://source.unsplash.com/random/600x600?roses" alt="">
  <img src="https://source.unsplash.com/random/600x600?sky" alt="">
  <img src="https://source.unsplash.com/random/600x600?nature" alt="">
  <img src="https://source.unsplash.com/random/600x600?blossom" alt="">
  <img src="https://source.unsplash.com/random/600x600?ice" alt="">
  <img src="https://source.unsplash.com/random/600x600?spring" alt="">
</div>


</body>
</html>

<!DOCTYPE html>

<head>

<title>Rhombus Grid Image | Webdevtrick.com</title>

</head>

<body>

</div>

</body>

</html>

style.css

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

/* Code By Webdevtrick ( https://webdevtrick.com ) */
html, body {
  height: 100%;
  font-size: 16px;
  line-height: 1.5;
  font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
}

body {
  overflow: hidden;
  background-color: #222;
  display: flex;
  align-items: center;
}

.contaniner {
  position: relative;
  flex-grow: 1;
  margin: auto;
  max-width: 1200px;
  max-height: 1200px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 2vmin;
  justify-items: center;
  align-items: center;
}

img {
  z-index: 1;
  grid-column: span 2;
  max-width: 100%;
  margin-bottom: -52%;
  -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
          clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  -webkit-transform: scale(1);
          transform: scale(1);
  transition: all .25s;
}
img:nth-child(7n + 1) {
  grid-column: 2 / span 2;
}
img:hover {
  z-index: 2;
  -webkit-transform: scale(2);
          transform: scale(2);
}

/* Code By Webdevtrick ( https://webdevtrick.com ) */

html, body {

height: 100%;

font-size: 16px;

line-height: 1.5;

font-family: Trebuchet MS, Helvetica, Arial, sans-serif;

}

body {

overflow: hidden;

background-color: #222;

display: flex;

align-items: center;

}

.contaniner {

position: relative;

flex-grow: 1;

margin: auto;

max-width: 1200px;

max-height: 1200px;

display: grid;

grid-template-columns: repeat(8, 1fr);

grid-template-rows: repeat(4, 1fr);

grid-gap: 2vmin;

justify-items: center;

align-items: center;

}

img {

z-index: 1;

grid-column: span 2;

max-width: 100%;

margin-bottom: -52%;

-webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

-webkit-transform: scale(1);

transform: scale(1);

transition: all .25s;

}

img:nth-child(7n + 1) {

grid-column: 2 / span 2;

}

img:hover {

z-index: 2;

-webkit-transform: scale(2);

transform: scale(2);

}

That’s It. Now you have successfully created CSS Rhombus Image Grid With Hover Effect, Scale Image On Hover. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.