Elementor Diamond Shape Image Gallery (With Hover Animation)
Elementor Diamond Shape Image Gallery
Begin by importing the template to your page, which you can download from the demo section below the iframe.
Next, remove any layouts you don’t need and replace the placeholder images with your own.
If you’re using the free version of Elementor, the layout may appear broken after importing. This will be fixed once you add the necessary CSS code snippets and CSS ID, as explained below.
The Diamond Gallery CSS Code
If you’re using Elementor Pro, you can find the CSS under Advanced > Custom CSS.
For Elementor Free users, simply add the CSS provided below to your project.
The only section of the code that needs modification is at the very beginning, where you’ll see the following:
--desktop-image-gap: 10px;
--mobile-image-gap: 10px;
--hover-image-animation-duration: 0.4s;
--hover-image-scale: 1;
Make adjustments as needed. Setting the scale to 1 will disable the hover animation.
The rest of the CSS code should remain unchanged.
Elementor free CSS
If you’re using Elementor Free, add the necessary CSS code snippet to your project.
Below is the code for the first image gallery. Assign it the ID diamond-gallery-1 under Advanced > CSS ID.
#diamond-gallery-1 {
--desktop-image-gap: 10px;
--mobile-image-gap: 10px;
--hover-image-animation-duration: 0.4s;
--hover-image-scale: 1;
}
#diamond-gallery-1 .gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: var(--desktop-image-gap);
}
#diamond-gallery-1 img {
aspect-ratio: 1;
object-fit: cover;
}
#diamond-gallery-1 .gallery-item {
-webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
pointer-events: visible;
}
#diamond-gallery-1 .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}
#diamond-gallery-1 .gallery-item:nth-child(2) {
grid-column: 4/6;
grid-row: 1/3;
}
#diamond-gallery-1 .gallery-item:nth-child(3) {
grid-column: 1/3;
grid-row: 2/4;
}
#diamond-gallery-1 .gallery-item:nth-child(4) {
grid-column: 3/5;
grid-row: 2/4;
}
#diamond-gallery-1 .gallery-item:nth-child(5) {
grid-column: 5/7;
grid-row: 2/4;
}
#diamond-gallery-1 .gallery-item:nth-child(6) {
grid-column: 2/4;
grid-row: 3/5;
}
#diamond-gallery-1 .gallery-item:nth-child(7) {
grid-column: 4/6;
grid-row: 3/5;
}
/* mobile layout */
@media (max-width: 767px) {
#diamond-gallery-1 .gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: var(--mobile-image-gap);
}
#diamond-gallery-1 .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}
#diamond-gallery-1 .gallery-item:nth-child(2) {
grid-column: 1/3;
grid-row: 2/4;
}
#diamond-gallery-1 .gallery-item:nth-child(3) {
grid-column: 3/5;
grid-row: 2/4;
}
#diamond-gallery-1 .gallery-item:nth-child(4) {
grid-column: 2/4;
grid-row: 3/5;
}
#diamond-gallery-1 .gallery-item:nth-child(5) {
grid-column: 1/3;
grid-row: 4/6;
}
#diamond-gallery-1 .gallery-item:nth-child(6) {
grid-column: 3/5;
grid-row: 4/6;
}
#diamond-gallery-1 .gallery-item:nth-child(7) {
grid-column: 2/4;
grid-row: 5/7;
}
}
/* the hover animation */
@media (min-width: 1025px) {
#diamond-gallery-1 .gallery-item {
animation: scaleOut forwards var(--hover-image-animation-duration) 1;
}
#diamond-gallery-1 .gallery-item:hover {
animation: scaleIn forwards var(--hover-image-animation-duration) 1;
}
@keyframes scaleIn {
0% {
transform: scale(1);
z-index: 2;
}
100% {
transform: scale(var(--hover-image-scale));
z-index: 2;
}
}
@keyframes scaleOut {
0% {
transform: scale(var(--hover-image-scale));
z-index: 1;
}
99.9% {
transform: scale(1);
z-index: 1;
}
100% {
transform: scale(1);
z-index: initial;
}
}
}
Here’s the code for the second image gallery. Assign it the ID diamond-gallery-2
#diamond-gallery-2 {
--desktop-image-gap: 10px;
--mobile-image-gap: 10px;
--hover-image-animation-duration: 0.4s;
--hover-image-scale: 1;
}
#diamond-gallery-2 .gallery {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: var(--desktop-image-gap);
}
#diamond-gallery-2 img {
aspect-ratio: 1;
object-fit: cover;
}
#diamond-gallery-2 .gallery-item {
-webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
pointer-events: visible;
}
#diamond-gallery-2 .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}
#diamond-gallery-2 .gallery-item:nth-child(2) {
grid-column: 4/6;
grid-row: 1/3;
}
#diamond-gallery-2 .gallery-item:nth-child(3) {
grid-column: 6/8;
grid-row: 1/3;
}
#diamond-gallery-2 .gallery-item:nth-child(4) {
grid-column: 1/3;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(5) {
grid-column: 3/5;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(6) {
grid-column: 5/7;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(7) {
grid-column: 7/9;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(8) {
grid-column: 2/4;
grid-row: 3/5;
}
#diamond-gallery-2 .gallery-item:nth-child(9) {
grid-column: 4/6;
grid-row: 3/5;
}
#diamond-gallery-2 .gallery-item:nth-child(10) {
grid-column: 6/8;
grid-row: 3/5;
}
@media (max-width: 767px) {
#diamond-gallery-2 .gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 10px;
}
#diamond-gallery-2 .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}
#diamond-gallery-2 .gallery-item:nth-child(2) {
grid-column: 1/3;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(3) {
grid-column: 3/5;
grid-row: 2/4;
}
#diamond-gallery-2 .gallery-item:nth-child(4) {
grid-column: 2/4;
grid-row: 3/5;
}
#diamond-gallery-2 .gallery-item:nth-child(5) {
grid-column: 1/3;
grid-row: 4/6;
}
#diamond-gallery-2 .gallery-item:nth-child(6) {
grid-column: 3/5;
grid-row: 4/6;
}
#diamond-gallery-2 .gallery-item:nth-child(7) {
grid-column: 2/4;
grid-row: 5/7;
}
#diamond-gallery-2 .gallery-item:nth-child(8) {
grid-column: 1/3;
grid-row: 6/8;
}
#diamond-gallery-2 .gallery-item:nth-child(9) {
grid-column: 3/5;
grid-row: 6/8;
}
#diamond-gallery-2 .gallery-item:nth-child(10) {
grid-column: 2/4;
grid-row: 7/9;
}
}
/* the hover animation */
@media (min-width: 1025px) {
#diamond-gallery-2 .gallery-item {
animation: scaleOut forwards var(--hover-image-animation-duration) 1;
}
#diamond-gallery-2 .gallery-item:hover {
animation: scaleIn forwards var(--hover-image-animation-duration) 1;
}
@keyframes scaleIn {
0% {
transform: scale(1);
z-index: 2;
}
100% {
transform: scale(var(--hover-image-scale));
z-index: 2;
}
}
@keyframes scaleOut {
0% {
transform: scale(var(--hover-image-scale));
z-index: 1;
}
99.9% {
transform: scale(1);
z-index: 1;
}
100% {
transform: scale(1);
z-index: initial;
}
}
}
Below is the code for the third gallery (which appears as a rotated square). Assign it the ID diamond-gallery-3
#diamond-gallery-3 {
--desktop-image-gap: 10px;
--mobile-image-gap: 10px;
--hover-image-animation-duration: 0.4s;
--hover-image-scale: 1;
}
#diamond-gallery-3 .gallery {
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(6, 1fr);
gap: var(--desktop-image-gap);
}
#diamond-gallery-3 img {
aspect-ratio: 1;
object-fit: cover;
}
#diamond-gallery-3 .gallery-item {
-webkit-clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
pointer-events: visible;
}
#diamond-gallery-3 .gallery-item:nth-child(1) {
grid-column: 3/5;
grid-row: 1/3;
}
#diamond-gallery-3 .gallery-item:nth-child(2) {
grid-column: 2/4;
grid-row: 2/4;
}
#diamond-gallery-3 .gallery-item:nth-child(3) {
grid-column: 4/6;
grid-row: 2/4;
}
#diamond-gallery-3 .gallery-item:nth-child(4) {
grid-column: 1/3;
grid-row: 3/5;
}
#diamond-gallery-3 .gallery-item:nth-child(5) {
grid-column: 3/5;
grid-row: 3/5;
}
#diamond-gallery-3 .gallery-item:nth-child(6) {
grid-column: 5/7;
grid-row: 3/5;
}
#diamond-gallery-3 .gallery-item:nth-child(7) {
grid-column: 2/4;
grid-row: 4/6;
}
#diamond-gallery-3 .gallery-item:nth-child(8) {
grid-column: 4/6;
grid-row: 4/6;
}
#diamond-gallery-3 .gallery-item:nth-child(9) {
grid-column: 3/5;
grid-row: 5/7;
}
@media (max-width: 767px) {
#diamond-gallery-3 .gallery {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(8, 1fr);
gap: 10px;
}
#diamond-gallery-3 .gallery-item:nth-child(1) {
grid-column: 2/4;
grid-row: 1/3;
}
#diamond-gallery-3 .gallery-item:nth-child(2) {
grid-column: 1/3;
grid-row: 2/4;
}
#diamond-gallery-3 .gallery-item:nth-child(3) {
grid-column: 3/5;
grid-row: 2/4;
}
#diamond-gallery-3 .gallery-item:nth-child(4) {
grid-column: 2/4;
grid-row: 3/5;
}
#diamond-gallery-3 .gallery-item:nth-child(5) {
grid-column: 1/3;
grid-row: 4/6;
}
#diamond-gallery-3 .gallery-item:nth-child(6) {
grid-column: 3/5;
grid-row: 4/6;
}
#diamond-gallery-3 .gallery-item:nth-child(7) {
grid-column: 2/4;
grid-row: 5/7;
}
#diamond-gallery-3 .gallery-item:nth-child(8) {
grid-column: 1/3;
grid-row: 6/8;
}
#diamond-gallery-3 .gallery-item:nth-child(9) {
grid-column: 3/5;
grid-row: 6/8;
}
#diamond-gallery-3 .gallery-item:nth-child(10) {
grid-column: 2/4;
grid-row: 7/9;
}
}
/* the hover animation */
@media (min-width: 1025px) {
#diamond-gallery-3 .gallery-item {
animation: scaleOut forwards var(--hover-image-animation-duration) 1;
}
#diamond-gallery-3 .gallery-item:hover {
animation: scaleIn forwards var(--hover-image-animation-duration) 1;
}
@keyframes scaleIn {
0% {
transform: scale(1);
z-index: 2;
}
100% {
transform: scale(var(--hover-image-scale));
z-index: 2;
}
}
@keyframes scaleOut {
0% {
transform: scale(var(--hover-image-scale));
z-index: 1;
}
99.9% {
transform: scale(1);
z-index: 1;
}
100% {
transform: scale(1);
z-index: initial;
}
}
}