custom gallery css

.custom-gallery .jet-engine-gallery-grid__item-wrap.is-lightbox::before {
    display: none
}
.custom-gallery .jet-engine-gallery-grid {
    display: grid;
    grid-template-columns: repeat(var(--columns), 1fr);
}
.custom-gallery .jet-engine-gallery-grid__item {
    max-width: 100%;
}
.custom-gallery .jet-engine-gallery-grid__item-img {
    height: 100%!important;
    aspect-ratio: 1;
}

.custom-gallery .jet-engine-gallery-grid__item:nth-child(3) ~ .jet-engine-gallery-grid__item {
    display: none
} 
.custom-gallery .jet-engine-gallery-grid__item:nth-child(3) .jet-engine-gallery-item-wrap:after {
    background: rgba(0,0,0,0.5)!important;
}
.jet-engine-gallery-grid__item .elementor-widget-container {
    text-align: center;
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: 100%;
    padding: 20px;
    z-index: 1
}

.jet-engine-gallery-grid__item .elementor-widget-container p {
    color: white;
    margin-top: 20px;
    font-size: 60%;
    font-weight: bold
}
.jet-engine-gallery-grid__item .elementor-widget-container .elementor-icon svg {
    fill: white;
    margin: auto
}

script add icon to last gallery image

<script>
  jQuery(document).ready(function() {
    // Customizable prefix and suffix
    var counter_prefix = "See all";
    var counter_suffix = "photos";
    
    
    // Task 1: Count items
    var countA = jQuery('.custom-gallery .jet-engine-gallery-grid__item').length;

    // Task 2: Clone and modify the hidden HTML
    var moreHtml = jQuery('.icon').clone();
    moreHtml.find('.elementor-icon svg').after('<p>' + counter_prefix + ' ' + countA + ' '  + counter_suffix + '</p>');

    // Task 3: Append the modified HTML
    jQuery('.custom-gallery .jet-engine-gallery-grid__item:nth-child(3) img').after(moreHtml.html());
    });
</script>

This code create this kind of gallery with "dynamic field" widget of crocoblock (JetEngine)

In my example there are 3 columns and 1:1 aspect-ratio. I'll explain how to modify those settings in the next comment

First make sure you activated the "Grid Gallery for Dynamic Field widget" on JetEngine dashbord.

Then follow those steps in your page/template:

1. add "dynamic field" widget. set it like this:

1.1) give it css class: custom-gallery (in advanced tab)
1.2) in style tab > Misc:
1.2.1) set image overlay color to: rgba(0, 0, 0, 0.15)
1.2.2) set image hover overlay color to: rgba(0, 0, 0, 0.5)

2. add "icon" widget after your gallery.
   2.1) give it css class: icon (in advanced tab)
   2.2) select your icon
   3.3) hide the icon from all screen sizes (in advanced tab > responsive)

3. add html widget after your icon
   3.1) paste the script in content tab
   3.2) paste the css in advanced tab > custom css