Smooth image title hover effect
HTML
<div class="card">
<div class="card-image">
<img src="https://unsplash.it/800/350?image=326" class="img-responsive">
</div>
<span class="card-info">
<h3 class="card-info__title">Lorem Ipsum</h3>
<span class="card-info__desc">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</span>
</span>
</div>
SCSS
// CARD
.card {
position: relative;
cursor: pointer;
width: 800px;
&:hover {
.card-info {
color: #fff;
}
.card-info__title {
margin-top: 10px;
color: #fff;
box-shadow: inset 0 -8px 0 #002049;
}
.card-info > .card-info__desc{
opacity: 1;
margin-top: 0px;
}
:after {
opacity: 0.5;
}
}
}
.card-info {
color: #fff;
position: absolute;
z-index: 50;
top: 50%;
padding: 0 30px;
transition: all 0.2s linear;
}
.card-image {
transition: all 0.2s linear;
img {
opacity: 1;
}
&:after {
content: "";
width: 100%;
height: 100%;
background: linear-gradient(to bottom,#39b97e 0%,#16c1f3 100%);
position: absolute;
display: block;
top: 0;
opacity: 0;
transition: all 0.2s linear;
}
}
.card-info__title {
font-family: "arial";
text-transform: uppercase;
color: #002049;
transition: all 0.2s linear;
box-shadow: inset 0 -2px 0 #002049;
margin-top: 50px;
}
.card-info__desc{
font-family: "arial";
margin-top: 20px;
opacity: 0;
transition: all 0.2s linear;
position: absolute;
}
