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; }
JAVASCRIPT
Expand for more options Login