Subscribe to my channel:
Hello guys,
Today we are going to see how to create a gallery in the Divi template that shows a text when hovering over it and also has a link.
This is useful if we want to create a personalized portfolio, cooking recipes or any other idea that comes to mind.
The result will be the following:
To do this we will use the DIVI constructor and the final aspect that the editor must have is the following:
The first step is to configure the row, it is the green section of the previous image, when you click on the three horizontal lines you will see the following screen and you have to leave the options as you see here:
Now we add the gallery module with the following options:
To add the images we have to click on the "Update Gallery" button and choose the images that we are going to add:
Now we have to add in each image the text that we want to appear when hovering in the image.
We are going to add it in the legend field when clicking on each image:
In the example I have added the following link with a title and subtitle:
<a href="https://comohacerunapagina.es"><b>Añade un título</b></br>Subtítulo aquí</a>
We have it almost ready, but in the absence of adding the style sheet it seems that we are very far from the final result:
Now we just have to add the CSS. To do this, we click on the constructor options, as shown in the following image:
We add the css in the following screen:
The CSS you have to add is:
/*---Add Links to the Divi Gallery Module and Show Captions on Hover---*/ /*Hide the image title and default overlay effect*/ .et_pb_gallery_item h3, .et_overlay { display: none; } /*Set the position and size of the images and add an extra pixel to get rid of white space between images*/ .et_pb_gallery_grid .et_pb_gallery_image { position: absolute; width: calc(100% + 1px) !important; } .et_pb_gallery_caption { margin: 0 !important; } /*Set the colour of the caption text*/ .et_pb_gallery_caption a { color: #fff; } /*Set the font size and case for the title*/ b { font-size: 20px; text-transform: uppercase; } /*Set the position of caption text so it displays on to of the image on hover and add an outline*/ p.et_pb_gallery_caption { position: relative; background: rgba(0, 0, 0, .5); /*This is the colour of the image overlay on hover*/ border: none; outline: 5px solid rgba(255, 255, 255, .5); /*This is the colour of the border*/ outline-offset: -20px; /*This moves the border in a little from the edge*/ text-align: center; padding: 25% 5%; /*Adjust the first value if using more or less text*/ cursor: pointer; opacity: 0; /*Hide the caption until hover*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; } /*Show the caption on hover*/ p.et_pb_gallery_caption:hover { opacity: 1; } /*Media queries: You will need to adjust these values if using more or less text*/ @media only screen and (max-width:1366px) { p.et_pb_gallery_caption { padding: 23.7% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1280px) { p.et_pb_gallery_caption { padding: 19% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width:1024px) { p.et_pb_gallery_caption { padding: 15% 5%; /*Adjust the first value if using more or less text*/ } } /*This media query make the gallery display as two columns rather than three on tablets in portrait*/ @media only screen and (min-width: 768px) and (max-width: 980px) { .et_pb_column .et_pb_grid_item:nth-child(2n+1) { clear: both !important; } .et_pb_gutters1 .et_pb_grid_item:nth-child(n) { width: 50% !important; margin: 0 !important; clear: none; } p.et_pb_gallery_caption { padding: 26.5% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 480px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 24.8% 5%; /*Adjust the first value if using more or less text*/ } } @media only screen and (max-width: 320px) { .et_pb_gallery_grid .et_pb_gallery_image { width: 100% !important; max-width: 100% !important; } p.et_pb_gallery_caption { padding: 19.4% 5%; /*Adjust the first value if using more or less text*/ } }
And we got the result we were looking for 😉
Hello…The dessert is good, I see a certain divization of Óscar…Heh heh. In any case, it is my framework for making web. What differences do you think between Genesis and Divi? How do you see both capable of doing the same projects? Greetings!
Hi Sergio,
I liked the "divization" thing. Many of you have asked me and that's why I'm doing it 😉
Genesis and Divi are very different visions. Divi is much easier to design but in my opinion more robust Genesis, yes, much more complicated.
Greetings 😉
Oscar
totally agree Oscar, genesis is amazing! and Divi is cool because of how easy it is to do some things that are normally difficult. well, great this video, huh? Thank you so much.
Thank you very much for your words Txomin 😉
Totally agree with your comment
A hug!
Good morning Oscar, a question, when subscribing and downloading the Divi template, how do the updates work? Since in order to be able to update, product keys are usually requested
Hi roberto,
I upload the updates to the premium zone and you have to update it manually.
Greetings 😉
ummMMMmm I don't know what I'm doing wrong, but it doesn't work, it's the 2nd time I try. Hello Oscar 🙂
Look, if you have a moment, it's a test website, I use it for a project.
I am using images with the same size that you use in the video 748px by 421px.
I have tried to make them less tall, narrower and I don't understand it hehe
It is true that the version of Divi is not the same as the one in the video, but I don't think it has anything to do with it.
example here:
ht—tps://txurrut.appbera.com/
Great Oscar, we keep learning with your wordpress tutorials
Thank you very much friend 😉
A hug!