I really like using drop shadow effects on images with the box-shadow css property and assigning classes is a breeze with Divi.   It’s become part of my standard child theme CSS and an effect I’ve been wanting to develop for awhile is increasing the shadow when hovered to create a ‘lift’ effect. I finally got around to doing it.

I used (3) classes separating the transition code into it’s own class to avoid duplicating the timing. An alternative may be to add separate timing to the other two classes.

Here is my codepen.io for it:

And a video showing how I use it in Divi:

Here is the CSS:

.box-shadow-transition img {
 -webkit-transition: all 0.50s ease-in-out;
 -moz-transition: all 0.50s ease-in-out;
 -ms-transition: all 0.50s ease-in-out;
 -o-transition: all 0.50s ease-in-out;
}
.box-shadow-below img {
 -webkit-box-shadow: 0 8px 12px -6px black;
 -moz-box-shadow: 0 8px 12px -6px black;
 box-shadow: 0 8px 12px -6px black;
}
.box-shadow-below-hover img:hover {
 -webkit-box-shadow: 0 12px 18px -6px black;
 -moz-box-shadow: 0 12px 18px -6px black;
 box-shadow: 0 12px 18px -6px black;
}

Build Beautiful.

Logan Ramirez

Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.