CSS UI Design Card with Blur Hover Effect
Welcome to another tutorial in techmidpoint . In this tutorial, I am going to make a CSS UI Design Card with Blur Hover Effect. When you move the mouse over the card image the other cards disappear with a blur effect.
CSS (Cascading Style Sheets) is a stylesheet language that is used to describe the look and formatting of a document written in HTML (HyperText Mark-up Language). It is most commonly used to style web pages, but it can also be used to style other types of documents, such as PDFs.
In terms of UI design, CSS is used to control the appearance of user interface elements, such as buttons, forms, and menus. It can be used to set colors, fonts, layouts, and other design details, making it an important tool for creating visually appealing and user-friendly websites and applications.
There are many resources available online for learning CSS, including tutorials, video courses, and documentation on various CSS properties and techniques. To get started with CSS UI design, you might consider reading some tutorials or taking a course to learn the basics, and then experimenting with your own designs using an HTML and CSS code editor.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS UI Design</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="circle">
<img src="bg1.jpg">
</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="">READ MORE</a>
</div>
</div>
<div class="card">
<div class="circle">
<img src="bg2.jpg">
</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="">READ MORE</a>
</div>
</div>
<div class="card">
<div class="circle">
<img src="bg3.jpg">
</div>
<div class="content">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<a href="">READ MORE</a>
</div>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css2?family=Poppins&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: linear-gradient(45deg, #333, #bb02ff);
background-attachment: fixed;
}
.container{
position: relative;
width: 1150px;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
img{
width: 100%;
}
.container .card{
position: relative;
width: 300px;
height: 420px;
border-radius: 10px;
box-shadow: 0px 15px 25px rgba(0,0,0,.2);
background-color: #fff;
margin: 20px;
overflow: hidden;
transition: .5s;
}
.container:hover .card{
filter: blur(20px);
transform: scale(0.9);
opacity: 0.5;
}
.container .card:hover{
filter: blur(0);
transform: scale(1.1);
opacity: 1;
}
.container .card .circle{
position: relative;
width: 100%;
height: 100%;
background-color: #000;
clip-path: circle(180px at center 0);
text-align: center;
}
.container .card .content{
position: absolute;
bottom: 10px;
page-break-after: 20px;
text-align: center;
padding: 20px;
}
.container .card .content p{
color: #666;
text-align: justify;
font-size: 15px;
}
.container .card .content a{
position: relative;
display: inline-block;
background-color: #000;
color: #fff;
padding: 10px 20px;
border-radius: 40px;
margin-top: 20px;
text-decoration: none;
}
.container .card:nth-child(1) .circle,
.container .card:nth-child(1) .content a{
background-color: #ffaf00;
}
.container .card:nth-child(2) .circle,
.container .card:nth-child(2) .content a{
background-color: #da2268;
}
.container .card:nth-child(3) .circle,
.container .card:nth-child(3) .content a{
background-color: #bb02ff;
}
For More Tutorials Please Click Here
