How to Create a card design using HTML and CSS | Beautiful zooming card hover effect design Using HTML and CSS
Simple create a Card design using HTML and CSS
Learn How to make a Card Design using HTML and CSS. latest UI design with HTML and CSS. Card Design Tutorial
Video Tutorial
For Download the Background image Click Here
How to use the code in stpe by step
- Open Your text Editor(like: VS code, SublimeText or Notepad++)
- Create a .html(like: index.html) file
- Copy the HTML code the code and past in the index.html file
- Then, Create a .css(like: style.css) file
- Copy the CSS code and past in style.css file
- Open the file in your browser
HTML CODE
HTML is a standard language for web page. With HTML you can create your own website. HTML is easy to learn - You will enjoy it
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Card Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="card">
<div class="card-wapper">
<div class="image">
<img src="./img5.jpg" alt="Card Image">
</div>
<div class="card-description">
<h3>Card Design</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, ducimus. Aliquid, officiis? Accusantium tenetur amet, optio doloribus distinctio dolore voluptas neque qui dolores deserunt quidem aut modi illo quam eius?</p>
</div>
</div>
<div class="card-wapper">
<div class="image">
<img src="./img6.jpg" alt="Card Image">
</div>
<div class="card-description">
<h3>Card Design</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, ducimus. Aliquid, officiis? Accusantium tenetur amet, optio doloribus distinctio dolore voluptas neque qui dolores deserunt quidem aut modi illo quam eius?</p>
</div>
</div>
<div class="card-wapper">
<div class="image">
<img src="./img7.jpg" alt="Card Image">
</div>
<div class="card-description">
<h3>Card Design</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Rerum, ducimus. Aliquid, officiis? Accusantium tenetur amet, optio doloribus distinctio dolore voluptas neque qui dolores deserunt quidem aut modi illo quam eius?</p>
</div>
</div>
</div>
</body>
</html>
CSS CODE
The Full from of CSS is Cascading Style Sheets. It explains how to show HTML elemnts on display. For web designers, it is powerfull tool to adjust the design and control of the web pages t demonstrate how they should be viewed.
@import url('https://fonts.googleapis.com/css2?family=Girassol&display=swap');
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: linear-gradient(to right, #61045f, #aa076b);
}
.card{
position: relative;
display: flex;
justify-content: center;
min-height: 100vh;
align-items: center;
}
.card-wapper{
position: relative;
width: 300px;
height: 400px;
background: #fff;
margin-left: 20px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(255, 255, 255, 0.249);
cursor: pointer;
transition: all 0.6s ease;
z-index: 10;
opacity: 0.5;
}
.card-wapper .image{
width: 300px;
height: 200px;
}
.card-wapper .image img{
width: 300px;
height: 200px;
border-radius: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.300);
}
.card-description{
margin-top: 10px;
}
.card-description h3{
padding: 5px 10px;
font-family: 'Girassol', cursive;
color: #999;
transition: all .6s ease;
}
.card-description p{
padding: 5px 5px;
font-family: sans-serif;
color: #000;
opacity: 0.7;
transition: all .6s ease;
}
.card-wapper::before{
content: '';
position: absolute;
width: 100%;
height: 1px;
background: none;
top: 0;
left: 0;
transition: all .6s ease;
border-radius: 20px;
z-index: -1;
}
.card-wapper:hover{
opacity: 1;
transition: all .7s ease;
}
.card-wapper:hover::before{
height: 100%;
background: #aa076b;
}
.card-wapper:hover .card-description h3{
color: #fff;
transition: all .6s ease;
}
.card-wapper:hover .card-description p{
color: #fff;
transition: all .6s ease;
}
Posts
No comments: