Learn how to create a circular grid with an amazing hover effect using HTML and CSS with our easy-to-follow guide.
Table of Contents
A circular grid with an amazing hover effect is a design element that consists of a grid of circular elements arranged in a circular pattern, with some sort of hover effect applied to each element. The hover effect could be something like a change in color, a change in size, or the display of additional content when the element has hovered over with the mouse.
Want to create a circular grid with an amazing hover effect using HTML and CSS?
In this tutorial, we'll be showing you how to create a circular grid with an amazing hover effect using HTML and CSS. The circular grid is a great way to showcase your content, and adding a hover effect can make it more interactive and engaging for your visitors.
Let's start making an amazing circular grid with cool hover effect Using HTML and CSS step by step.
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for the grid.
The first line of the code declares the document type as HTML5.
The <html> tag is used to enclose the entire HTML document, and the lang attribute specifies the language used in the document, which in this case is English.
The <head> section contains meta information about the page, including the title of the page, which is displayed in the browser tab, and the character encoding used in the document. The viewport meta tag specifies the width of the screen the content should be rendered on. The link tag is used to link an external CSS stylesheet named styles.css, which will be used to style the content of the HTML document.
The <body> tag contains the content of the web page, in this case, a <div> container with the class gallery and four <img> tags. Each <img> tag references a different image, which is specified in the src attribute, and also includes an alt attribute that provides a text description of the image for accessibility purposes.
The gallery class used in the <div> container is used to apply the CSS styles defined in the styles.css file. These styles create a circular grid of images, where each image is enclosed in a circle, and they are arranged in a grid pattern.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
This is the basic structure of the grid using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the grid is in place, the next step is to add styling to the grid using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to create our circular grid.
The first rule in this stylesheet sets the margin of the <body> tag to zero, which removes any space around the edges of the page. The min-height property is set to 100vh, which means that the height of the body will always be at least the height of the viewport.
The next set of rules applies to the .gallery class, which is used to create the circular grid of images. The --g variable sets the gap between the images, and the --s variable sets the size of each image. The display property is set to grid, which allows the images to be arranged in a grid pattern. The border-radius property sets the border of the grid to be a perfect circle.
The next set of rules applies to the <img> tag within the .gallery class. The grid-area property specifies that each image should span the entire grid. The width property sets the width of each image to the value of the --s variable, and the aspect-ratio property ensures that the height of the image is equal to its width. The object-fit property ensures that the image is scaled to fit the circular container. The border-radius property sets the border of the image to be a perfect circle. The transform property is used to create a hover effect, and the cursor property sets the cursor to a pointer when hovering over the image. The font-size property is set to zero, and the z-index property is set to zero, which places the images behind the text. The transition property specifies the speed and timing of the hover effect.
The next rule sets a hover effect for the <img> tag within the .gallery class. When an image is hovered over, the font-size property is set to the value of the --s variable, and the z-index property is set to one, which brings the image to the front of the page. The transition property specifies the speed and timing of the hover effect.
The final set of rules applies to each individual image within the .gallery class. The clip-path property is used to create a polygon shape that clips the image, creating a unique circular shape for each image. The --_x and --_y variables are used to specify the position of each image within the grid. These variables are updated with a calc function that uses the --g variable to offset the position of each image from the center of the grid.
This will give our circular grid an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
margin: 0;
min-height: 100vh;
display: grid;
place-content: center;
background: #3B8686;
}
.gallery {
--g: 8px; /* the gap */
--s: 400px; /* the size */
display: grid;
border-radius: 50%;
}
.gallery > img {
grid-area: 1/1;
width: var(--s);
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
transform: translate(var(--_x,0),var(--_y,0));
cursor: pointer;
font-size: 0;
z-index: 0;
transition: .3s, z-index 0s .3s;
}
.gallery img:hover {
font-size: var(--s);
z-index: 1;
transition: transform .2s, font-size .3s .2s, z-index 0s;
}
.gallery:hover img {
transform: translate(0,0);
}
.gallery > img:nth-child(1) {
clip-path: polygon(50% 50%,.5em 1.2em,0 1em,0 0,100% 0,100% 1em,calc(100% - .5em) 1.2em);
--_y: calc(-1*var(--g))
}
.gallery > img:nth-child(2) {
clip-path: polygon(50% 50%,calc(100% - 1.2em) 0.5em,calc(100% - 1em) 0,100% 0,100% 100%,calc(100% - 1em) 100%,calc(100% - 1.2em) calc(100% - .5em));
--_x: var(--g)
}
.gallery > img:nth-child(3) {
clip-path: polygon(50% 50%,calc(100% - .5em) calc(100% - 1.2em),100% calc(100% - 1.2em),100% 100%,0 100%,0 calc(100% - 1em),.5em calc(100% - 1.2em));
--_y: var(--g)
}
.gallery > img:nth-child(4) {
clip-path: polygon(50% 50%,1.2em .5em,1em 0,0 0,0 100%,1em 100%,1.2em calc(100% - .5em));
--_x: calc(-1*var(--g))
} Final Output:
Conclusion:
In this tutorial, we showed you how to create a circular grid with an amazing hover effect using HTML and CSS. By following our step-by-step guide, you can create your own circular grid and add your own unique hover effects to make your content stand out.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
