Hover effect on promo

[bracas]

I would like to copy this hover effect on the elements in the related section. It bounce smoothly.

[nabeel]

Hi there,

Thanks for writing in! You can try out the following code instead:

.x-promo {
    transform: translateY(0);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top left;
}
.x-promo:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: translateY(-20px);
    opacity: 0.8;
}

You can learn more about CSS3 transforms and transitions here https://www.w3schools.com/cssref/css3_pr_transform.asp and https://www.w3schools.com/cssref/css3_pr_transition.asp

Hope this helps!