Filter Card using HTML and CSS
Codewithrandom Blogs
Posted on May 25, 2023
Hello Coder! Welcome to the Codewithrandom blog. In this blog, we learn how to create a Filter Card Using Html and Css. When we Click on any card another card blur and only that card show. It has an interactive hover effect with blur and a box-shadow effect. We will make a very simple and minimal UI.
I hope you enjoy our blog so let's start with a basic HTML structure for the Filter Card.
The filter CSS property gives an element visual effects like blur or color change. It is standard practice to use filters to change how borders, backgrounds, and images.
HTML Code For Filter Card:-
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<section class="hero-section">
<div class="card-grid">
<a class="card" href="#">
<div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557177324-56c542165309?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80)"></div>
<div class="card__content">
<p class="card__category">Category</p>
<h3 class="card__heading">Example Card Heading</h3>
</div>
</a>
<a class="card" href="#">
<div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557187666-4fd70cf76254?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
<div class="card__content">
<p class="card__category">Category</p>
<h3 class="card__heading">Example Card Heading</h3>
</div>
</a>
<a class="card" href="#">
<div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1556680262-9990363a3e6d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
<div class="card__content">
<p class="card__category">Category</p>
<h3 class="card__heading">Example Card Heading</h3>
</div>
</li>
<a class="card" href="#">
<div class="card__background" style="background-image: url(https://images.unsplash.com/photo-1557004396-66e4174d7bf6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60)"></div>
<div class="card__content">
<p class="card__category">Category</p>
<h3 class="card__heading">Example Card Heading</h3>
</div>
</a>
<div>
</section>
In the head section, where we will also add the link for our Montserrat typeface, we will add a few crucial links before adding the structure for our filter card. We will also include a connection to our external CSS file along with the Google Fonts link.
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="style.css">
In order to add the framework for our filter card using the section tag, we will first construct a hero section. Within this section, we will use the div tag with class gird to create the CSS filter card. making use of the "card_background" div class. Using the h3 tag selector, we will now make a section within it for the card's content, and we will then add the content to the card heading. To add the background for the filter card, we will add the image tag inside the background. Using a similar technique, we will then make numerous other filter cards.
There is all Html code for the Filter Card. Now, you can see output without Css. Then we write Css for the Filter Cards.
CSS Code For Filter Card:-
Here we have created some css style variables. In style sheet we will use css grid.
:root{
--background-dark: #2d3548;
--text-light: rgba(255,255,255,0.6);
--text-lighter: rgba(255,255,255,0.9);
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-xxl: 64px;
--width-container: 1200px;
}
*{
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
body{
height: 100%;
}
.hero-section{
align-items: flex-start;
background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
display: flex;
min-height: 100%;
justify-content: center;
padding: var(--spacing-xxl) var(--spacing-l);
}
.card-grid{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--spacing-l);
grid-row-gap: var(--spacing-l);
max-width: var(--width-container);
width: 100%;
}
@media(min-width: 540px){
.card-grid{
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width: 960px){
.card-grid{
grid-template-columns: repeat(4, 1fr);
}
}
.card{
list-style: none;
position: relative;
}
.card:before{
content: '';
display: block;
padding-bottom: 150%;
width: 100%;
}
.card__background{
background-size: cover;
background-position: center;
border-radius: var(--spacing-l);
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition:
filter 200ms linear,
transform 200ms linear;
}
.card:hover .card__background{
transform: scale(1.05) translateZ(0);
}
.card-grid:hover > .card:not(:hover) .card__background{
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
.card__content{
left: 0;
padding: var(--spacing-l);
position: absolute;
top: 0;
}
.card__category{
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-s);
text-transform: uppercase;
}
.card__heading{
color: var(--text-lighter);
font-size: 1.9rem;
text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
line-height: 1.4;
word-spacing: 100vw;
}
Step1: The backdrop for our filter card will first be defined using the root puesdo class, and the styling for the filter card will be added using the text property. We will now change the padding and margin from the browser's usual padding and margin to zero using the universal selector (*). We will specify the box size as "border-box" using the box-sizing property.
:root{
--background-dark: #2d3548;
--text-light: rgba(255,255,255,0.6);
--text-lighter: rgba(255,255,255,0.9);
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-xxl: 64px;
--width-container: 1200px;
}
*{
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
body{
height: 100%;
}
Step2: We will add styling to our hero section using the class selector (.hero-section) and the class selector (.hero-section), and we will add a background picture using the background property. Flex is the selected display option. The filter card grid portion, where the display is set to grid, will receive the styling, and the width will also be set to "100%." We will include responsive to our filter card by using the media query attribute.
.hero-section{
align-items: flex-start;
background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
display: flex;
min-height: 100%;
justify-content: center;
padding: var(--spacing-xxl) var(--spacing-l);
}
.card-grid{
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--spacing-l);
grid-row-gap: var(--spacing-l);
max-width: var(--width-container);
width: 100%;
}
@media(min-width: 540px){
.card-grid{
grid-template-columns: repeat(2, 1fr);
}
}
@media(min-width: 960px){
.card-grid{
grid-template-columns: repeat(4, 1fr);
}
}
.card{
list-style: none;
position: relative;
}
.card:before{
content: '';
display: block;
padding-bottom: 150%;
width: 100%;
}
.card__background{
background-size: cover;
background-position: center;
border-radius: var(--spacing-l);
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition:
filter 200ms linear,
transform 200ms linear;
}
.card:hover .card__background{
transform: scale(1.05) translateZ(0);
}
.card-grid:hover > .card:not(:hover) .card__background{
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
.card__content{
left: 0;
padding: var(--spacing-l);
position: absolute;
top: 0;
}
.card__category{
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-s);
text-transform: uppercase;
}
.card__heading{
color: var(--text-lighter);
font-size: 1.9rem;
text-shadow: 2px 2px 20px rgba(0,0,0,0.2);
line-height: 1.4;
word-spacing: 100vw;
}
Our undertaking involving the filter card is now finished. Here is the HTML and CSS version of our revised output. This creation can be used in your portfolio.
Hope you like the Filter Card Using Html and Css. you can see output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you!
In this post, we learn how to create a Filter Card Using HTML and CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by - Code With Random/Anki
code by - Steve Meredith
Posted on May 25, 2023
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
November 29, 2024