Elementor Diamond Shape Image Gallery (With Hover Animation)

In this tutorial, you will learn how to create an Elementor image gallery where each image is a diamond shape.

More specifically, each image is in the shape of a perfect square that's rotated 45 degrees.

Here is what we are creating. Get the template for free!

I added this same gallery design as part of the Cross Fading Images Mosaic premium tutorial, scroll down here to see.

Features of that premium tutorial:

• Polyvalent: Each slot in the gallery can have 2, 3 or more images (2 is recommended)
• Responsive: Works well on desktop, tablet and mobile
• Lightweight: Just a few lines of codes are required for this, and no dependencies

Back to the current tutorial.

Elementor Diamond Shape Image Gallery

To start with, import the template on your page. Download it from below the iframe of the demo.

Now, delete the layouts that you don't want or need, and swap the images with your own.

If you have Elementor free, the layout will be broken after importing it, until you have added the CSS code snippets and CSS ID, as explained below.

The Diamond Gallery CSS Code

If you have Elementor Pro, you will find the CSS under Advanced > Custom CSS.

If you have Elementor Free, add the CSS below to your project.

The only part of hte code that requires editing is at the very start. You will see this:

    --desktop-image-gap: 10px;
    --mobile-image-gap: 10px;
    --hover-image-animation-duration: 0.4s;
    --hover-image-scale: 1;

Adjust as you wish. Give a scale of 1 will essentially remove the hover animation.

The rest of the CSS code should stay as it is.

Elementor free CSS

If you have Elementor Free, add the CSS code snippet that you need to your project. See my Super Simple Elementor Free Custom CSS tutorial.

Here is the code for the first image gallery. You will need to give it the ID diamond-gallery-1 under Advanced > CSS ID

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Diamond Shape Image Gallery (With Hover Animation) tutorial 
 * Found at this URL https://element.how/elementor-diamond-shape-image-gallery/ 
 */ 
</script>

Here is the code for the image gallery two, give the the ID diamond-gallery-2

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Diamond Shape Image Gallery (With Hover Animation) tutorial 
 * Found at this URL https://element.how/elementor-diamond-shape-image-gallery/ 
 */ 
</script>

Here is the code for the third gallery (the one that ends up being a rotated square), give it the ID diamond-gallery-3

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Diamond Shape Image Gallery (With Hover Animation) tutorial 
 * Found at this URL https://element.how/elementor-diamond-shape-image-gallery/ 
 */ 
</script>

Finally, enjoy your Elementor Diamond Shape Gallery!

I really hope you found this tutorial useful.

Cheers!