Elementor

Animated portfolio items using elementor

In this tutorial I will show you how to create  animated portfolio items using Elementor Pro.

Essential Links

Get Domain & Webhosting(60% off)

Get Elementor Pro

CSS code

Add CSS class “image_right” for right side image and “image_left” for left side image

Add this CSS code with inner section

selector{
    height: 350px;
    overflow-y: clip;
    display: block;
}
selector img{
    border-radius: 10px 10px 0 0;
    cursor: pointer;
    transition: all .7s;
}

selector:hover img{
    transform: scale(.9);
}
selector:hover .image_right img{
    transform: rotate(10deg) scale(.98);
    margin-left: 20px;
}
selector:hover .image_left img{
    transform: rotate(-10deg) scale(.98);
    margin-right: 20px;
}
@media only screen and (max-width: 768px) {
  selector{
    height: 250px;
}
}

Need this built rather than explained?

Send me the project details and I will suggest the right approach.

Start a Project →