CSS HTML Responsive Card Hover
Video tutorial with source code. CSS HTML card design.
Super
0
1280
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
Our website is for sale! The domain and website has been running for more than 3 years, but it's time to part with it. There is no price, so I consider any offer. Contact us if you are interested in buying in the feedback form, we will discuss options, price and details for transferring the site. (script, database and everything else for the site to work).
