Learn how to create a responsive grid list with a hover effect using CSS and HTML. Follow this step-by-step tutorial for an engaging user experience.
Table of Contents
Creating a responsive grid list with a hover effect using CSS and HTML can greatly enhance the visual appeal of your website. With more users accessing the web through their mobile devices, having a responsive grid list ensures that your website is accessible on all devices, providing a seamless user experience. In this article, we will guide you through the process of creating a responsive grid list with a hover effect, and provide you with a hook to start implementing the design.
Let's start making an amazing responsive grid list with hover effects using HTML, and CSS step by step.
Join My Telegram Channel to Download the Project: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, and CSS. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
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 our grid list.
The code presented is an HTML document with a list of boxes, each representing a project in a different field: Web Development, UI/UX, and Digital Marketing. Each box contains an icon and some text that specifies the type of project and the number of projects in that field. The boxes are styled with different colors using custom properties.
The HTML document uses the Font Awesome icon library, which is linked through a URL, and a CSS file called "styles.css", which is linked through a relative path. The CSS file defines the styles for the boxes and specifies a hover effect that increases the size of the box and changes the color of the text and icon on hover.
The boxes are organized using CSS grid, with the ".container" class defining the grid container and the ".box" class defining the grid items. Each box is styled with the "--color" custom property, which is used to set the background color of the box.
Overall, this HTML document creates a visually appealing and interactive display of projects in different fields, using icons and custom colors to distinguish each field.
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 our grid list with hover effect 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 list is in place, the next step is to add styling to the list using CSS. CSS allows us to control the visual appearance of the list, including things like layout, color, and typography.
It starts by importing the Google font 'Poppins' with various font weights. The * selector applies the same styling to all HTML elements, including removing margins and padding, applying border-box sizing, and setting the font family. The body selector defines the background color and gradient and sets the display to flex with horizontal and vertical centering.
The main content is defined within a container element, which has a width of 50% and uses CSS grid to create columns of equal width. The grid-template-columns property is used to define the number and size of columns. The grid-gap property sets the space between grid items.
The box class defines the style of each individual box element. The ::before pseudo-element is used to create a vertical bar on the left side of each box. The background property is set to the value of the --color variable, which is defined separately for each box.
When a box is hovered over, the width of the ::before pseudo-element is transitioned to 100%, and the border radius is set on the top and bottom right corners. The content class defines the position of the box's content, which is centered vertically and horizontally. The icon class is used to position the box's icon and set the font size and color. The text class defines the style for the box's heading and paragraph text. When the box is hovered over, the color of the heading and paragraph text is changed to white.
This will give our grid list 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.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: rgb(238,174,202);
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}
.container {
width: 50%;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
grid-gap: 0.75rem;
}
.box {
position: relative;
width: auto;
height: 75px;
background: #fff;
border-radius: 5px;
cursor: pointer;
box-shadow: 10px 10px 15px rgba(59, 38, 38, 0.25);
}
.box::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 100%;
background: var(--color);
transition: 0.5s ease-in-out;
}
.box:hover::before {
width: 100%;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.box .content {
position: relative;
display: flex;
align-items: center;
height: 100%;
}
.box .content .icon {
position: relative;
min-width: 70px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.5em;
color: var(--color);
transition: 0.5s ease-in-out;
}
.box:hover .content .icon {
color: #fff;
}
.box .content .text h3 {
font-weight: 500;
color: var(--color);
transition: 0.5s ease-in-out;
}
.box .content .text p {
font-size: 0.9em;
color: #999;
transition: 0.5s ease-in-out;
}
.box:hover .content .text h3,
.box:hover .content .text p {
color: #fff;
} Final Output:
Conclusion:
Creating a responsive grid list with hover effect using CSS and HTML can greatly enhance the visual appeal of your website. By following the steps outlined in this article, you can create a visually appealing design that adapts to all screen sizes, providing a seamless user experience. Remember, the key to creating a responsive grid list is to pay attention to detail and have patience. With practice, you can create stunning grid layouts that elevate your website's design.
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 😊
