We have written before about zoom effects applied to blog grids and images (and you can find those tutorials by looking at the Related Posts section below) but we can also apply zoom effects to other Divi modules. In this tutorial we will describe how we can add a zoom effect to the Divi Blurb Module. Blurb modules are incredibly handy because they package up an image and some text into one module. This makes it easy to move them around and to style them.

We will use some CSS to achieve the effect we are looking for. We strongly recommend you use a child theme for this but you can put your CSS into the Divi->Theme Options->Custom CSS if you want.

The CSS we are going to use creates a new class called zoom-blurb. You must add this new class to the Blurb Module Settings -> Custom CSS -> CSS Class field or this will not work.

So here is the CSS we will use. CSS can translate, rotate, scale, and skew elements. We are going to use scale, to give the zoom effect. So, the first thing the CSS does is to set up the length (0.5 seconds) of the effect, and specify that we want a 10% increase in the size of the image, by using a scale of 1.1. Though this code is widely supported, we repeat the CSS in slightly different forms to maximise the range of browsers that it will work on.

The transform is set up on the image (.zoom-blurb img) so that we get the effect when we hover over it.

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

.zoom-blurb div.et_pb_main_blurb_image {
  overflow:hidden;
}

The other important point about the CSS is that the overflow needs to be set to hidden. Without this, the image would simply expand by 5%. That would be ok, but it’s a bit untidy, especially if you are using a border around your blurb module. As it happens, the image sits inside a container called .et_pb_main_blurb_image and it is this container that has its overflow behaviour set to hidden in order to constrain the zoom. With this in place, the image appears to zoom rather than simply expand.

Hello World !

This is a Blurb.

So here is the result. Try hovering your mouse over the image. It should zoom in for you. if you look closely though, you will see that there is an interesting problem with what we have done – the bottom edge of the image is expanding, it is not being constrained. If you use Inspect (right click in Google Chrome) and take a look at what is going on, you will notice that the  .et_pb_main_blurb_image container that the image sits inside is a little bigger than the image itself on the bottom edge. It is this space that the image is expanding into.

Here’s a screen grab from the Inspect. If you look closely you can see that the .et_pb_main_blurb_image container (the blue box) is just a little too big. it is sticking out beneath the image.

Now, this might just be a bug (I can’t think why this difference in size should exist) and it might go away at a future version of Divi (we are using 3.0.41 here) but, as it happens, it is easy to avoid –

The problem with the zoom constraint on the bottom edge is only present when there is no link on the blurb!

As long as you have a link on this blurb, the image will zoom and the expanded area will be hidden, even on the bottom edge. In fact, I have noticed other situations where Divi behaves slightly differently depending on whether or not you are using a link, so this is something to look out for. Here is an example with a link on the blurb to see the difference it makes to the zoom constraint on the bottom edge –

In fact, you can see that the whitespace between the image and title is a slightly different width. This is because, in the second version with the link, the container that holds the image is just a little smaller than it was when there was no link….. and, as we said, this ‘spurious space’, now removed, allows the zoom to work, to be hidden.

Hello World !

This is a Blurb.

Success then? Eh…. not quite. Take a look at this example where we have put the Blurb into a single column row…..

Hello World !

This is a Blurb.

The blurb has been expanded to fit the column. Unfortunately, our image is not very big, nothing like as wide as the column the blurb is now sitting in. Apart from the blurb looking a bit odd because of the border, the horizontal expansion of the image is no longer hidden, because the expansion no longer overflows the container. The container that the image sits inside, the  .et_pb_main_blurb_image <div>, has expanded to fit its parent container. You can see this clearly from the Inspect –

At this point, we could just accept that we can’t use this zoomed blurb unless the image is bigger than the width of the blurb. If we were happy with this restriction, when we want a single blurb on its own row we could simply create a three column row, put the blurb into the middle column and leave the outer columns unpopulated. This would work but we would have to be aware that this solution fails when the image is not wide enough. Now, it’s unlikely that you would actually want to use an image in a blurb that was not as wide as the blurb…. In fact, I would imagine most people would standardise the image sizes used in their blurbs to a single size. However, there is another way….

The container that holds the image is a <div> and these are block elements. One of the properties of a blobk element is that it will expand as much as it is able to, it will take up as much space as it can. On the other hand, inline elements, will only take up as much space as they need to. A good example of an inline element is a link, an anchor element. It is only as big as its ‘child’, the text or image the link is attached to. It is only as big as it needs to be. It shrinks to fit. This is why, in general, you cannot set the width of an inline element. Its width is determined by its content, by its children. So, we would like the <div> to shrink to fit the image it contains. We would like it to behave a bit like an inline element, even though it is a block element. The usual way of doing this is to make use of display:inline-block. This will give the <div> some of the characteristics of an inline element. Here is what the code to do this looks like –

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

.zoom-blurb div.et_pb_main_blurb_image {
  overflow:hidden;
  display:inline-block; /* not needed if images always wider than column */
}

With this change, we shrink the .et_pb_main_blurb_image to fit the image it contains. With this approach though, we would need to switch off the border as can be seen from the example below. The image zoom is now working but the main blurb container, that everything else sits inside and that the border is applied to, is still taking up the full width of the single column row.

Hello World !

This is a Blurb.

Now, we could shrink all of the <div> elements to fit the image (.zoom-blurb, .zoom-blurb div.et_pb_blurb_content, .zoom-blurb div.et_pb_main_blurb_image) but that gives another unintended and unwanted side effect. Basically, the blurb would no longer be centered if we did this. Again, we could center it ourselves but the problem with that is that we would then be responsible for making it responsive. On balance, we think this is too much of a pain and prefer not to do this. So, as long as you are prepared to not use a border, the shrink to fit will work and you can use blurbs whose images are narrower than the column they are placed in. Of course, by simply using images that are big enough to avoid this, we would not need the display:inline-block and we would not be forced to abandon the borders….

Here is a zoomed blurb, placed in the middle column of a three column row, without using the inline-block.

Hello World !

This is a Blurb.

Subscribe To Our Blog

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!