CSS HTML Responsive Card Hover

Video tutorial with source code. CSS HTML card design.

CSS Responsive Card Hover | Html5 CSS3 Responsive Design Tutorial

HTML

<body>
 <div class="card">
   <div class="content">
    <h2>Captain Marvel</h2>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
	<a href="#"> Read More</a>
	</div>
	<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/bf71705b-0d8b-45c5-a07d-a62e1e85127d/dd2m4r7-d8783ae0-0b77-4ce3-a13a-e5c3978362bc.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOiIsImlzcyI6InVybjphcHA6Iiwib2JqIjpbW3sicGF0aCI6IlwvZlwvYmY3MTcwNWItMGQ4Yi00NWM1LWEwN2QtYTYyZTFlODUxMjdkXC9kZDJtNHI3LWQ4NzgzYWUwLTBiNzctNGNlMy1hMTNhLWU1YzM5NzgzNjJiYy5wbmcifV1dLCJhdWQiOlsidXJuOnNlcnZpY2U6ZmlsZS5kb3dubG9hZCJdfQ.xpA8Ty8xV7uvPCs4tIHBBCo0S92A-Gx7lhiTS1BLd5M">
 </div>
</body>

CSS

*{
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;
}
.card{
position: relative;
width: 600px;
height:350px;
margin:20px;
display:flex;
justify-content:flex-start;
align-items:center;
border-radius:20px;
background: linear-gradient(135deg,#d41e31,#491f8f);
}
.card img {
position:absolute;
bottom:0;
left:50%;
transform:translateX(-50%);
height:400px;
transition:0.5s;
}
.card:hover img{
left:80%;
height:460px;
}
.card .content{
position: relative;
width:50%;
left:20%;
padding: 20px 20px 20px 40px;
opacity:0;
visibility: hidden;
transition:0.5s;
}
.card:hover .content{
opacity: 1;
visibility: visible;
left:0%;
}
.card .content h2{
color: #fff;
text-transform:uppercase;
font-size:2.5em;
line-height:1em;
}
.card .content p{
color:#fff;
}
.card .content a {
position: relative;
display: inline-block;
color: #111;
padding: 10px 20px;
border-radius:10px;
background:#fff;
margin-top:10px;
text-decoration: none;
}
@media (max-width: 991px){
 .card{
 position:relative;
 width:auto;
 max-width:600px;
 transition:0.5s;
 align-items: flex-start;
 }
 .card:hover{
 height:600px;
 }
 .card:hover img{
 left:50%;
 height:500px;
 }
 .card .content{
 width:100%;
 left: 0;
 padding:40px;
 }
}
@media (max-width: 420px){
.card .content{
 padding:30px;
 }
 .card:hover img{
 height:300px;
 } 
}

Author - video link


Find out about the update of this script first in our telegram channel: https://t.me/proweblabxyz