Created
August 28, 2020 16:28
-
-
Save wpflames/e2378b877fbbfa6e0772d28a6b7a935b to your computer and use it in GitHub Desktop.
Cards with CSS Animation Hover Effect - HTML
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<title>Card Hover Effects</title> | |
<link rel="stylesheet" href="assets/css/style.css"> | |
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700;800&display=swap" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="container"> | |
<div class="card"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<div class="content"> | |
<h2>01</h2> | |
<h3>Post Title</h3> | |
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sapiente, voluptate consectetur ea, nihil modi maiores aperiam cumque iste corrupti porro. </p> | |
<a href="#">Read More</a> | |
</div> | |
</div> | |
<div class="card"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<div class="content"> | |
<h2>02</h2> | |
<h3>Post Title</h3> | |
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sapiente, voluptate consectetur ea, nihil modi maiores aperiam cumque iste corrupti porro. </p> | |
<a href="#">Read More</a> | |
</div> | |
</div> | |
<div class="card"> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<span></span> | |
<div class="content"> | |
<h2>03</h2> | |
<h3>Post Title</h3> | |
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt sapiente, voluptate consectetur ea, nihil modi maiores aperiam cumque iste corrupti porro. </p> | |
<a href="#">Read More</a> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment