body{
background:#111d5e;
margin: 0;
font-family: 'Franklin Gothic';
}
.container{
display: flex;
min-height: 100vh;
justify-content: center;
align-items: center;
column-gap: 10px;
}
.card{
height: 300px;
width:300px;
background: #292929;
position: relative;
box-shadow: 10px 20px 20px rgba(0,0,0,0.8);
transition: all 0.3s ease;
}
.card img{
width:100%;
height: auto;
}
.card i{
color:#cdb30c;
}
.card .text,
.card:after{
position: absolute;
opacity: 0;
left:20px;
right:20px;
}
.card:after{
content: '';
background:#1b262c;
display: block;
top:20px;
bottom: 20px;
opacity: 0;
transform: rotate3d(-1,1,0,100deg);
transition: 0.4s;
}
.card:hover:after{
opacity: 0.9;
transform: rotate3d(0,0,0,0deg);
}
.text{
top:45%;
opacity:0;
z-index: 1;
transform: translate(10%,-30%);
transition: 0.3s;
text-align: center;
color:#fff;
}
.text h2{
font-family: 'century gohtic';
}
.card:hover .text{
opacity: 1;
transform: translate(0,-50%);
transition: all 0.3s;
}
/*Responsive*/
@media only screen and (max-width: 768px)
{
.container {
flex-direction: column;
}
.card{
margin:10px;
}
}
Card hover Effect using Html & Css
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.