In this article we are going to explain how to create a gutterless Divi gallery with hover effects. We will use a zoom effect and a rotation effect on mouse hover. We are going to use the Divi Gallery module as a starting point. Here is what we want to end up with, using the zoom effect –

 We are going to use CSS to re-style the Divi Gallery module to achieve this. We recommend using a child theme for this. There are many good articles on the internet about creating child themes. You can, instead, either use a CSS plugin or put your CSS into Divi->Theme Options->Custom CSS.

Divi Gallery Module Structure

The first thing we want to do is to look at the structure of the default gallery grid. We want to use this as a starting point. Here is the Divi Gallery module set up to display eight images in a grid, with the Title, Caption and Pagination all switched off –

if you use Google Chrome Inspect (or equivalent) to look at the structure, you can see that the images are all in a container called .et_pb_gallery_items

Now, the images in the gallery are cropped to the same width and height. This means that we can determine how many columns are in the grid by simply choosing the column width (the image width plus margin). To do this, each image has its own container, called .et_pb_gallery_item. It is this container that determines the column width and hence the number of columns, by setting its right margin. At the same time, the right and bottom margins also create the horizontal and vertical spacing between images.

Finally, the images themselves are held in another container, called .et_pb_gallery_image. Its job is to display the overlay. The overlay needs to be the same size as the image –

Targetting Individual Galleries

Rather than add CSS that effects ALL galleries, we will target each gallery individually. The way to do this is to add a new class to each gallery. In the CSS below, we will use a class called .gallery-grid.

You will need to attach the new class name, gallery-grid, to each gallery you want to re-style. Do this by entering the class name into the gallery’s Module Settings -> Advanced -> CSS ID & Classes. The CSS below will have no effect unless you do this.

Going Gutterless

Now that we understand a bit more about the structure of the Divi Gallery module, we can use some CSS to re-style it. We know that the spacing between the images is controlled by the margin on the .et_pb_gallery_item so we remove this by setting the margin to zero pixels. This will remove the margin on all sides of the object. At the same time, we also set the width to 25%. We are aiming for four columns in the row. Using a percentage like this gives us some protection against issues later on with responsiveness. Here is the CSS to do this –

.gallery-grid div.et_pb_gallery_item { 
    margin:0px !important; 
    width:25% !important;
}

Not Using Four Columns

If you decide to not use four columns but to use something else, you will need to work out the right width for each image. That is straightwoforward but what is not so obvious is that Divi actually assumes that the gallery is arranged in fout columns. By that we mean that, when the page is wide enough to have four volumns, Divi actually forces every fifth image to start a new row. It does this by setting clear:both on every fifth image. Using this is the classic way of removing float:left from HTML objects, and it is this float:left that forces our images to line up in a row rather than be placed one beneath the other, which is what they would do by default. So, the net effect of the clear:both then, is to force every fifth image to wrap to the next row. If we want to use something other than four columns we are going to have to take action. As it happens, we can stop clear:both from having an effect with this –

/* need this when not using four columns */
.gallery-grid div.et_pb_gallery_item { 
    clear:none !important;
}

It’s probably safe to include this anyway, even if you are using a four column layout. 

Disabling the Default Overlay

We are planning to add a hover effect to the image. We can’t do this without disabling the default overlay. Using Google Chrome Inspect, we can see that the overlay is held inside an HTML span element called .et_overlay. This CSS will disable it –

.gallery-grid span.et_overlay {
    display:none;
}

As an aside, Instead of removing the overlay, we could simply change the overlay colour and remove the icon. Here is the CSS to do this –

.gallery-grid span.et_overlay {
    /* switch off overlay */  
    /* display:none; */

    /* change overlay colour */ 
    background-color:black;
    opacity:0.2 !important;
}

/* remove icon - removing the overlay does this anyway */ 
.gallery-grid span.et_overlay::before { 
    display:none;
}

The CSS here is changing the background colour of the span element and setting a low opacity (the opacity is a number between 0 and 1, where 0 is transparent). Using Google Chrome Inspect, we can see that the icon has been added to the span using the before pseudo-class. So we can easily switch that off using display:none.

If you use this code to simply colour the overlay, the hover effects we are about to describe will not work. You need to disable the default hover behaviour for the hover effects to work.

Also just note that if you decide to change the overlay colour and opacity but to continue to display the icon (I’ll let you work out how to do this), you might be better off using background-color:rgba(0,0,0,0.2); rather than the easier to understand background-color:black; opacity:0.2; The reason you might prefer this is that, as oroginally written, if you have the icon displayed, its opacity will be effected. By using rgba for the overlay colour, the opacity of the icon is not effected.

Adding A Border

It might be useful to add a border around the images. We can do that by targeting the .et_pb_gallery_item itself. We are going to add a solid, one pixel wide, transparent border. We add a transparent border so that, if we use this on a section with a different coloured background, our gallery border will still look reasonable. If we gave it a colour, we might need to change the colour if there was a clash with the section background. Here is the CSS for the border –

.gallery-grid div.et_pb_gallery_item {
    border: 1px solid transparent;
}

Adding A Zoom Hover Effect

We are going to use some CSS to add a couple of hover effects to the images. The first one we are going to add is a zoom effect. We will do this by enlarging the images a little on mouse hover. We are going to give this effect a new class name, to distinguish it from the other effect we are going to add later. We are going to call this one .gallery-zoom.

Just as we did for the .gallery-grid class, we also need to target the gallery with our new .gallery-zoom class. The gallery will now have both of our classes targetting it.  Enter both of the class names into the gallery’s Module Settings -> Advanced -> CSS ID & Classes. The CSS below will have no effect unless you do this.

Here is the CSS we will use to make the zoom effect –

.gallery-zoom img {
    transition:all 0.5s; 
    -moz-transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
}
		
.gallery-zoom img:hover {
    transform:scale(1.1);
    -moz-transform:scale(1.1);
    -webkit-transform:scale(1.1);
}

This CSS will not work unless you disable the default overlay.

Just before we move on, there are a couple of extra things to say about the CSS above. Firstly, the transition is defined in two parts; the length of the transition is specified on the image and the type of tranistion is specified on the mouse hover. Obviously, you can speed up or slow down the transition by changing the CSS. You can also change the amount of zoom by changing the scale on the image hover. It works like a multiplication factor, 1.1 scales the image by 10% and 2.0 would scale the image by 100%.

Lastly, we need three versions (the moz- etc.) of the instructions because the tranistion CSS needs to be used with a vendor prefix. This is because individual vendors added support for transition before it was officially supported in the CSS standards.

Overflowing The Zoom Effect

If you look with Google Chrome Inspect, you can see that the zoom effect is being constrained by both the container that the image sits inside and by the container that all of the images sit inside. Both .et_pb_gallery_image and .et_pb_gallery_items have overflow-x and overflow-y set to hidden. If we switch this to visible instead, we should see the overflow. Here is the code to do this –

.gallery-grid div.et_pb_gallery_image, .gallery-grid div.et_pb_gallery_items {      
    overflow:visible !important;
}

So, that’s almost working but we now have a really interesting issue with the overlapping of the images. Basically, when we hover on an image, any part of the image that then overlaps the images to the right and below, will be displayed beneath them. CSS uses a property called z-index to specify the order in which overlapping objects are displayed. The higher this number, the more precedence an object has when stacked. We don’t know what z-index the images have but they are likely to all be the same. We want the image that the mouse is hovering over to have a higher z-index than all of the images next to it. We can do this by (temporarily) changing its z-index on mouse hover to a large number –

.gallery-grid div.et_pb_gallery_image:hover {
    z-index:999;
}

Adding a Drop Shadow

We have managed to create a nice 3d effect with the image lifting off of the page. We can enhance this by adding a drop shadow. We want it to only appear when the image is hovered. Here is the CSS to do this –

.gallery-grid img:hover {
    box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.2) !important;
}

It is a little difficult to see because our images are dark. Take a look at the bottom of the images on the second row when you hover over them.

If you want a different shadow, the values in the CSS can be modified. The first two values are the shadow offsets, in the horizontal and vertical dimensions. Then the next value is the size of the shadow. The final value is the color. We have used the rgba function to make an opaque colour. The final argument to rgba is the opacity (a scale of 0 to 1).

In fact, there are lots of online tools that will let you ‘design’ a shadow and then automatically generate the CSS code for you. Try googling for box shadow generator.

Adding a Rotation Hover Effect

There are lots of effects we can create using transition. So let’s try a different one. We are going to replace the scale with a rotation. To do this, add this CSS then change the class attached to the gallery’s Module Settings -> Advanced -> CSS ID & Classes to be gallery-rotate instead of gallery-zoom.

.gallery-rotate img {
    transition:all 0.5s; 
    -moz-transition:all 0.5s; 
    -webkit-transition:all 0.5s; 
}
		
.gallery-rotate img:hover {
    transform:rotate(5deg);
    -moz-transform:rotate(5deg);
    -webkit-transform:rotate(5deg);
} 

This is Responsive, isn’t it?

We have sized the images by hand at 25% of the width of their container, .et_pb_gallery_items. So, if the viewport narrows, our images will narrow as well. They will keep displaying as four columns. Eventually, our images are going to be quite small and it makes sense to swap from four columns to three, then to two, then to one column. We can do this by simply adjusting the width. You can use CSS like this to achieve the effect –

@media (max-width: 980px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:33% !important;
    }
}

@media (max-width: 780px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:50% !important;
    }
}

@media (max-width: 680px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:100% !important;
    }
}

The CSS has been applied to the gallery above. Try decreasing the width of the viewport to see how it behaves compared to the previous versions.

It should work fine but the keen eyed reader will notice that we are using a slightly longer class name to target the gallery item in the CSS. It turns out that, below 980 pixels, Divi requires us to be a little more specific about how we target these objects. This is because Divi itself uses some extra CSS below 980 pixels that will take precedence over our code unless we do this.

Lastly, hover effects don’t make much sense on mobile phones so let’s disable them below 680 pixels, say. We still want the gutterless grid to work below 680 pixels though, so we have to carefully apply the media queries to only the hover effects.

All Of The Code

For convenience, here is all of the CSS in one place –

.gallery-grid div.et_pb_gallery_item {
    margin:0px !important;
    width:25% !important;
}

/* remove or replace the overlay */
.gallery-grid span.et_overlay {
	
    /* switch off overlay */
    display:none;
	
    /* change overlay colour */
    /* background-color:black; */
    /* opacity:0.2 !important; */
}

/* remove icon - removing the overlay does this anyway */ 
/* .gallery-grid span.et_overlay::before {  */
/*     display:none; */
/* } */

.gallery-grid div.et_pb_gallery_item {
    border: 1px solid transparent;
}


@media (min-width: 680px) {
/* allow hover effects only on non-mobiles */
	
    .gallery-zoom img, .gallery-rotate img {
        transition:all 0.5s; 
        -moz-transition:all 0.5s; 
        -webkit-transition:all 0.5s; 
    }
		
    .gallery-zoom img:hover {
        transform:scale(1.1);
        -moz-transform:scale(1.1);
        -webkit-transform:scale(1.1);
    }  

    .gallery-rotate img:hover {
        transform:rotate(5deg);
        -moz-transform:rotate(5deg);
        -webkit-transform:rotate(5deg);
    } 
	
    .gallery-grid div.et_pb_gallery_image, .gallery-grid div.et_pb_gallery_items {      
        overflow:visible !important;
    }
	
    .gallery-grid div.et_pb_gallery_image:hover {
        z-index:999;
    }

    .gallery-grid img:hover {
        box-shadow: 8px 8px 14px rgba(0, 0, 0, 0.2) !important;
    }
}

@media (max-width: 980px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:33% !important;
    }
}

@media (max-width: 780px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:50% !important;
    }
}

@media (max-width: 680px) {
    .gallery-grid div.et_pb_gallery_item.et_pb_grid_item {
        margin:0px !important;
        width:100% !important;
    }
}

If you found our blog article useful, why not subscribe? Get all of our articles and tutorials delivered direct to your inbox!

You have Successfully Subscribed!