Follow these steps to create this eye-catching effect by showing corner borders on your images, permanently or just on hover!
Image Module
PREVIEW:
1. Corner Borders
2. Corner Borders on Hover
1. Corner Borders
To create this effect on the Divi Image module, we’ll add a background with linear gradients to the module and slightly shrink the image by adding padding around it.
Paste this into Image → Advanced → Custom CSS → Main Element:
padding: 30px; background: linear-gradient(#000000, #000000) top left, linear-gradient(#000000, #000000) top left, linear-gradient(#000000, #000000) top right, linear-gradient(#000000, #000000) top right, linear-gradient(#000000, #000000) bottom left, linear-gradient(#000000, #000000) bottom left, linear-gradient(#000000, #000000) bottom right, linear-gradient(#000000, #000000) bottom right; background-size: 5px 30px, 30px 5px; background-repeat: no-repeat;
Adjust the values to your liking:
padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.
2. Corner Borders on Hover
It’s the same effect described earlier, except this time we’ll apply the background (the 4 corner borders) only to the Image’s Hover state, using the Hover Options provided by Divi. So, once you activate them from the Image > Advanced > Custom CSS > Main Element field (click on the ‘Hover Options’ icon) paste this:
Image → Advanced → Custom CSS → Main Element (DESKTOP):
padding: 30px;
Image → Advanced → Custom CSS → Main Element (HOVER):
background: linear-gradient(#000000, #000000) top left, linear-gradient(#000000, #000000) top left, linear-gradient(#000000, #000000) top right, linear-gradient(#000000, #000000) top right, linear-gradient(#000000, #000000) bottom left, linear-gradient(#000000, #000000) bottom left, linear-gradient(#000000, #000000) bottom right, linear-gradient(#000000, #000000) bottom right; background-size: 5px 30px, 30px 5px; background-repeat: no-repeat;
Adjust the values to your liking:
padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.
🥳 That’s it!
DonDivi Gallery Module
The DonDivi Gallery module is included in the DonDivi Builder plugin. And while it already comes with tons of awesome built-in effects, we’ll show you how to also apply this corner borders effect to its images on hover!
PREVIEW:
Paste this into DonDivi Gallery → Advanced → CSS Class:
corner-borders
By assigning this CSS Class only to the module you want to modify, you will prevent these styles from being applied to other modules on the same page.
Paste this into Page Settings → Advanced → Custom CSS:
.corner-borders .ddb-gallery-item {
padding: 15px;
}
.corner-borders .ddb-gallery-item:hover {
background:
linear-gradient(#000000, #000000) top left,
linear-gradient(#000000, #000000) top left,
linear-gradient(#000000, #000000) top right,
linear-gradient(#000000, #000000) top right,
linear-gradient(#000000, #000000) bottom left,
linear-gradient(#000000, #000000) bottom left,
linear-gradient(#000000, #000000) bottom right,
linear-gradient(#000000, #000000) bottom right;
background-size: 3px 20px, 20px 3px;
background-repeat: no-repeat;
}
Adjust the values to your liking:
padding: sets the distance between the image and the corner borders.
#000000: choose any color you like.
background-size: tweak the length and thickness of the borders.
🥳 That’s it!
DonDivi Gallery
Enjoy the ultimate Image Gallery experience in one single module!