Hello friends, today in this blog you’ll learn How To Create Image Cards With Hover Effect Only Using CSS & HTML . We’ll use Html & Css to create this Our Team Section . Earlier I’ve shared a blog on How To Create Responsive Our Team Section Using Html Css | Our Team Page Using Html Css .
This Image Cards Is Completely responsive For All Devices Like Mobile , Laptop , Tablets etc.
If You have any Problem so, I Also Created a full video tutorial on this Image Cards With Hover Effect Only Using CSS & HTML you can see this tutorial .
Video Tutorial of ” Image Cards With Hover Effect Only Using CSS & HTML “
You might like this:
- Responsive Image Slider
- Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- Css Image Hover Effect Using Html Css | Css Image Card Hover Effect
Image Cards With Hover Effect [Source Codes]
To create this Image Card First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Image Cards With Hover Effect Only Using CSS & HTML from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<!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">
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<title>Image Card with Hover Effect</title>
</head>
<body style="margin: 0; padding: 0; font-family: sans-serif;">
<div class="container">
<div class="card">
<div class="img-box">
<img src="1.jpg">
</div>
<div class="content">
<h2>Nikhil<br><span>Web Developer</span></h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Iste repellendus necessitatibus inventore iusto fuga.</p>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="card">
<div class="img-box">
<img src="2.jpeg">
</div>
<div class="content">
<h2>Nikhil<br><span>Web Developer</span></h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Iste repellendus necessitatibus inventore iusto fuga.</p>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="card">
<div class="img-box">
<img src="3.jpg">
</div>
<div class="content">
<h2>Nikhil<br><span>Web Developer</span></h2>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Iste repellendus necessitatibus inventore iusto fuga.</p>
<ul>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-instagram" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
/* COPYRIGHT- CODING WITH NICK*/
/* # ⚙️ Technology Used
1. HTML5
2. CSS3
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟 to this 👆 Repository */
/************************************************/# CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* COPYRIGHT- CODING WITH NICK*/
/* # ⚙️ Technology Used
1. HTML5
2. CSS3
# 🎓 Access this vedio
[Click Here] https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
## 👏 Support Developer
1. Subscribe & Share my YouTube Channel - https://www.youtube.com/channel/UCsseF0Swqs5FsXXtEXo1m_A
2. Add a Star 🌟 to this 👆 Repository */
/************************************************/
.container{
position: relative;
width: 1000px;
margin: 150px;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 440px;
grid-gap: 40px;
}
.container .card{
position: relative;
background: black;
overflow: hidden;
border-radius: 10px;
transition: 0.5s;
}
.card:hover{
transform: translateY(-20px);
box-shadow: 0 20px 2px rgba(0,0,0,0.2);
}
.container .card .img-box{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: 0.5s;
}
.container .card:hover .img-box{
opacity: 0.5;
}
.container .card .img-box img{
width: 100%;
}
.container .card .content{
position: absolute;
width: 100%;
height: 60%;
bottom: -100%;
padding: 20px;
padding-top: 60px;
box-sizing: border-box;
text-align: center;
transition: 0.5s;
}
.container .card:hover .content{
bottom: 0;
}
.container .card:nth-child(1) .content{
background: linear-gradient(0deg,orange, transparent);
}
.container .card:nth-child(2) .content{
background: linear-gradient(0deg,purple, transparent);
}
.container .card:nth-child(3) .content{
background: linear-gradient(0deg,brown, transparent);
}
.container .card .content h2{
margin: 0 0 10px;
padding: 0;
color: white;
font-size: 20px;
}
.container .card .content h2 span{
color: yellow;
font-size: 16px;
}
.container .card .content p{
margin: 0;
padding: 0;
color: white;
font-size: 16px;
}
.container .card .content ul{
display:flex ;
margin: 20px 0 0;
padding: 0;
align-items: center;
justify-content: center;
}
.container .card .content ul li{
list-style: none;
}
.container .card .content ul li a{
color: white;
padding: 0 10px;
font-size: 18px;
transition: 0.5s;
}That’s all, now you’ve successfully created a Image Cards With Hover Effect Only Using CSS & HTML . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
