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



on the site are taken from open sources. The site does not contain files for download. All links to files from open sources. Owners of copyrights to the material may request removal of the post from the site.