Home Web Design CSS Pure CSS Card With Hover Effect | Animated Cards Design

Pure CSS Card With Hover Effect | Animated Cards Design

May 10, 2019

23669

How to Create or Design Animated Cards with HTML & CSS? See This Pure CSS Card With Hover Effect.

Maybe you know what is a card on the webpage. If you don’t know about this, Mostly cards are used to organize listings of blog posts, products, services, etc. Section with border and content and take margin from another one they are cards.

Previously I had shared Bootstrap Pricing Table, These are an example of what is a card. But I had created that program using JS and Bootstrap. But today I am sharing card in pure CSS with animation effect on the mouse hover. If are you a beginner then you will learn what is CSS variable and how to use var.

This is a very simple & clean program easy to understand for beginners also. The Pure CSS Card With Hover Effect program has an attractive look, you can use it on your website. We can able to create this type of program because of CSS3 power. This program is a good UI design in my opinion.

If you now thinking how its program actually looks, then you can see this preview given here below.

Preview Of Animated Cards Design

See this video preview for getting an idea of how this program looks like.

https://webdevtrick.com/wp-content/uploads/animated-card-in-pure-css.mp4?_=1

Now you can see how this program looks visually. If you like this program, then get the source code of it.

Pure CSS Card Source Code

Before sharing source code, I want to say about this program. As you can see in the preview these effects are all built-in CSS. For one card I had created 3 divs. First for main div, second for image and third for text. I had put <a> tag inside div, there you can put your own link. For color, htmlmargin, border-radius I created CSS var variables.

Using variable you don’t have put to same value every time, just place variable there. For creating this program, you have to create only 2 files. One for HTML & one for CSS. Follow the steps to create this program 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 Filter Cards</title>
      <link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css?family=Reem+Kufi" rel="stylesheet">
</head>
	
<body>
	
<section class="hero-section">
  <div class="cgrid">
    <a class="card" href="#">
      <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/1372972/pexels-photo-1372972.jpeg?cs=srgb&dl=close-up-coffee-contemporary-1372972.jpg&fm=jpg)"></div>
      <div class="ccontent">
        <h3 class="textcard">Graphic Design</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/943096/pexels-photo-943096.jpeg?cs=srgb&dl=code-coding-connection-943096.jpg&fm=jpg)"></div>
      <div class="ccontent">
        <h3 class="textcard">Web Development</h3>
      </div>
    </a>
    <a class="card" href="#">
      <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/218717/pexels-photo-218717.jpeg?cs=srgb&dl=blur-close-up-connection-218717.jpg&fm=jpg)"></div>
      <div class="ccontent">
        <h3 class="textcard">SEO Tutorials</h3>
      </div>
    </li>
    <a class="card" href="#">
      <div class="cardbg" style="background-image: url(https://images.pexels.com/photos/821749/pexels-photo-821749.jpeg?cs=srgb&dl=camera-close-up-device-821749.jpg&fm=jpg)"></div>
      <div class="ccontent">
        <h3 class="textcard">About Photography</h3>
      </div>
    </a>
  <div>
</section>
</body>

</html>

<!DOCTYPE html>

<html>

<head>

<title>CSS Filter Cards</title>

</head>

<body>

<h3 class="textcard">Graphic Design</h3>

</div>

</a>

<h3 class="textcard">Web Development</h3>

</div>

</a>

<h3 class="textcard">SEO Tutorials</h3>

</div>

</li>

<h3 class="textcard">About Photography</h3>

</div>

</a>

<div>

</section>

</body>

</html>

style.css

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

/* code by webdevtrick ( https://webdevtrick.com ) */
: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: 'Reem Kufi', sans-serif;
  font-size: 16px;
}

body{
  height: 100%;
}

.hero-section{
  align-items: flex-start;
  background-color: darkturquoise;
  display: flex;
  min-height: 100%;
  justify-content: center;
  padding: var(--spacing-xxl) var(--spacing-l);
}

.cgrid{
  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){
  .cgrid{
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media(min-width: 960px){
  .cgrid{
    grid-template-columns: repeat(4, 1fr); 
  }
}

.card{
  list-style: none;
  position: relative;
}

.card:before{
  content: '';
  display: block;
  padding-bottom: 150%;
  width: 100%;
}

.cardbg{
  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 .cardbg{
  transform: scale(1.10) translateZ(0);
}

.ccontent{
  left: 0;
  padding: var(--spacing-l);
  position: absolute;
  top: 0;
}


.textcard{
  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;
}

100

101

102

103

104

105

106

107

108

/* code by webdevtrick ( https://webdevtrick.com ) */

: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: 'Reem Kufi', sans-serif;

font-size: 16px;

}

body{

height: 100%;

}

.hero-section{

align-items: flex-start;

background-color: darkturquoise;

display: flex;

min-height: 100%;

justify-content: center;

padding: var(--spacing-xxl) var(--spacing-l);

}

.cgrid{

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){

.cgrid{

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

}

@media(min-width: 960px){

.cgrid{

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

}

.card{

list-style: none;

position: relative;

}

.card:before{

content: '';

display: block;

padding-bottom: 150%;

width: 100%;

}

.cardbg{

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 .cardbg{

transform: scale(1.10) translateZ(0);

}

.ccontent{

left: 0;

padding: var(--spacing-l);

position: absolute;

top: 0;

}

.textcard{

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;

}

That’s It. Now you have successfully created Pure CSS Card With Hover Effect or Animated Card Design. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

4 COMMENTS

Manisha May 16, 2019 At 4:04 pm

This is really really so cool an awesome.. it’s really help me a lot.. thanks a lot for sharing.. your all article are truly so useful an helpful..
Keep sharing this kinda information.. thanks again..

Reply
- shaan May 16, 2019 At 4:25 pm
  
  Thank you very much, Stay connected for daily updates.
  
  Reply
André October 18, 2019 At 12:14 pm

Tks, beautiful tutorial. Hugs from Brazil 🙂

Reply
100fim August 21, 2020 At 1:38 am

a shit.should have the start css code

Reply

Pure CSS Card With Hover Effect | Animated Cards Design

Preview Of Animated Cards Design

Pure CSS Card Source Code

4 COMMENTS

LEAVE A 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

Preview Of Animated Cards Design

Pure CSS Card Source Code

4 COMMENTS

LEAVE A REPLY Cancel reply

EVEN MORE NEWS

POPULAR CATEGORY

LEAVE A REPLY