Like our free content? Then you'll love our exclusive Club!
Divi Academy Membership gives you exclusive access to over 110 resources, including child themes, layouts, cheatsheets, tutorials, live training and member perks. And new content is added EVERY Monday!
Update 14th September 2017: This recipe is not working so well after Divi updates and really needs to be rewritten to take into account all the changes that have been implemented these past few months. I appreciate I have not answered lots of comments requesting help (have been very busy) but unfortunately I cannot possibly provide custom code for each individual’s specific needs, and there are lots of requests for this. With that in mind, I am switching off comments for this recipe until I have a chance to rewrite this effect in a way that fixes issues since the updates and makes it easier for you to adjust to your own needs. Please do feel free to continue to use this if it works for you but I won’t be able to provide support until it is updated. Thanks 
Checkout the new and improved recipe here!!!
Recipe #22 is a modification to the Divi Gallery Module using only CSS and a little HTML: How to add links to the Divi gallery Module and show captions on hover.
In creating this recipe I discovered something I hadn’t realised before, did you know you can add links to the caption field in the media library? I certainly didn’t but that little discovery made creating this effect so much easier and means that now, instead of your gallery images opening in a modal window, you can now link them to any web page you like, which for me really extends the possibilities of this already great Divi module.
You can view the demo here which uses 8 images but you can have as many as you want.
Watch the video, get the code you need in the accompanying blog post, be sure to scroll to the bottom for your fabulous freebie, and let me know what you think in the comments!
So let’s get cooking!
Ingredients
The Divi Theme from Elegant Themes
Some suitable images sized at 900 x 600px, although any image size should work.
Cooking time
This should take you around 15 minutes max.
Preparation
The first thing we need to do is set up our section. So add a new section with a single column and then add the gallery module.
We are going to make this a fullwidth gallery so open up the row settings and set it to fullwidth with a custom gutter width of 1, then save & exit.
Method
Next we need to set up our gallery with the images, captions and links we want to display. So open up the gallery module, set the layout to grid, set the number of images you want to show (I’m using 8) and make sure show title and caption is set to yes. Then click on update gallery.
In the media library, upload your images as you normally would and then select the images you want to add to the gallery.
Next, click on edit gallery, we are going to add our links to the images. Select an image, add a title and alt text for SEO and then add in your link to the page you want the image to open with the text that should display on hover. It should look something like this:
<a href="https://divisoup.com"><b>Add the title here</b></br>Add the subtitle text here</a>
If you add roughly the same amount of text I have used in the demo then you shouldn’t need to make any adjustments to the CSS but if you use less or more or change the font size you made need to edit it in a few areas but I will show you where in a moment.
Continue working through your gallery images until they all have a link and caption and then click update gallery. Your gallery should now look something like this:
Time for the CSS!
If this is the only gallery you have on your site or you want to use this effect for all the galleries you have on a site then you can add this CSS to your child theme stylesheet or the Divi options custom CSS box. However, as I have not used a custom class with this recipe (the caption text was a pain to target) if you don’t want the effect applied anywhere else on a site then add it to the page specific custom css box.
What we are doing with this CSS is:
- Hiding the title and the default overlay effect
- Setting the position of the images to absolute so we can then move the caption text up on top of the images
- Setting the colour of the image overlay and caption text on hover
- Adding some padding to the caption text so the overlay covers the whole image and makes it all clickable
- Adding some media queries so it also looks good on smaller devices.
Check the comments in the CSS to see which values you might want to change if you are using more or less text than the demo.
I have added media queries for the most common screen sizes but it is impossible to test for them all so you may want to add some more, that is up to you.
/*---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 that’s it. Now when you want to add to your gallery simply update the gallery with the new image and include the link in the caption field.
If you found this helpful please leave a comment and subscribe to my newsletter for all my latest Divi related content.
Michelle X
Hi Michelle! First of all, thank you very much for this, it is excellent. Just two things. 1. I have my images square, and have been playing around with the paddings and so, but I don´t get the overlay to fit properly the image. Besides, I don´t have the same amount of text in every image ¿Is there any way to solve this? 2. I cannot get to eliminate the space between rows. The page is in coming soon mode, and cannot disable it, I don´t know what you would need in order to help me. Thank you very much… Read more »
Helle.
Thank you for this nice tutorial, and all your other recipes ! I just tried this one, but I would like to know how to have the whole image clickable and not only the title …
I saw you already answered “You can display the link as a block element and then set a relative width and height.”. But as I am new user, how do you implement this ?
This is the video… https://www.youtube.com/watch?v=_BaOrYhBLOU
Hello Michelle,
if I follow your recipe and add the links and the title to the images in the MediaManager, I will end up with all places where these images are used in my website.
I have some images which I use in different contexts, and I want to show them in the gallery in one context only, without influence to the other uses of that image, is there a way to do this?
Or do I have to upload the images again for this use and can’t reuse the images which are in the medialibrary already?
You can upload different images but the quickest way would be to target the caption property in the areas you do not want it to show and set it to display: none;
Hello Michelle, First thanks for a great addition to Divi. Two questions for you if you have time. 1) Is there a way to keep the title under the image from disappearing? I tried by deleting .et_pb_gallery_item h3, display: none;}, but that did not work. 2) I know you’ve answered this question, but how can I make it so clicking on the overlay activates the link inside of it? I’m new at all this and so did not fully understand what you suggested. Could you please walk me through what I need to do or tell me where I can… Read more »
This is a fantastic site so glad I found it. I needed to know how to put a link on a Gallery Slider image, Ive managed to get rid of the Lightbox with some CSS and tried a few plugin to get a link on the images but so far failed to find a solution. I wish ET would make a simple slideshow that didn’t require type padding to hold it together. If I can find out how to add links to the Gallery Slideshow I will be a very happy man.
I plan to take a look at the gallery slider soon and try to solve some of these common issues Mark
Hi Michelle
I have tried adding the code as well as link all my images in the portfolio but it only shows the code on the front end. I had a similar glitch when wanting to make my footer open on scroll so not sure if there is something wonky with my installation, but it is not working.
Could you possibly assist by having a look at the site? I can send you a PM with the details if possible. I have a portfolio of websites on the site and this would be stunning!
Thanks so much!
Hi Michelle, Great work around! I am trying to adapt your code slightly to display an image title, but no link. I have managed to do so, but I can’t quite figure out how to get the clicks to go through the div to the one below it. i.e. I just want the title to open the lightbox as per the normal gallery feature. At the moment, because I don’t have a link, clicks do nothing. I have been playing around with ‘pointer-events: none;’ but that disables the hover too. Any ideas on allowing clicking through to the bottom layer?… Read more »
Please, can you explain how to display the link as a block element and then set to relative width and height? I want this to work when selecting the image, not just the text.
Michelle, I am using your Bold theme and love it. Now I am trying to incorporate the R22 tut on using a hover + description and am running into a strange issue. I have four images (all resized and the same size) in the gallery. I have had to place the CSS in the Theme Options as I already have other galleries on the page. The issue I am having is that the first two images are showing up just fine…however, the second two are being cut off. I looked in the CSS you supplied and I see nothing in… Read more »
Hey Michelle,
It’s me again lol.. ok so I am trying to find a way to make my gallery images clickable (leads to a specific page) but not implement any of the captions and borders..
I have done lots of searching, posted in the support / design forums but most replies and results lead me back to you.. This is not a bad thing because I appreciate your knowledge but I was trying to get it done myself but I can’t figure it out.
Any advice on what to do would be greatly appreciated!
Hi Michelle,
Thanks for much for the helpful article. I am wanting to modify your code a little, but I can’t quite figure out where I need to do that.
In the gallery module am wanting to simply replace the default icon with the title of the image on hover. Similar to what you have outlined, but without the boarder and link etc.
Would you be able to help guide me through this?
Hi Michelle, I have done this recipe once before with success, and have repeated it on my MEDIA page. Are you able to look and see why my Tony Orlando magazine goes in full size? https://achieveit360.com/news-room/
Thanks for this great article. I have two questions. the link only work on text of caption . how to increase clickable area to whole image ? second question is about the size of image. gallery grid makes images small. i am showing only one image so i want the image to be of original size. how can we do that ?
You can display the link as a block element and then set a relative width and height.
For a single image this really isn’t a solution, just use the image module or a text module. These may help with that:
https://divisoup.com/r7
https://divisoup.com/r11
Hi! This is exactly what I needed, thank you.
Only one question remains; Is it possible to make the link cover the full image? So that you don’t need to click the title specifically.
I’m looking forward to your response. Thanks in advance,
You can display the link as a block element and then set a relative width and height.
Please, Can yoy explain step by step? Thanks
how to do that?)
can you post a code?
Could you spell out how one (a newbie…) would go about doing this? I’ve tried the following in the custom CSS for the page, but it doesn’t work (except to make the overlay bigger or smaller; in other words, the clickable area doesn’t increase, it’s still just the text that’s clickable…)
a {
display:inline-block;
width:xx%;
height:xx%;
}
a:link {
display:inline-block;
width:xx%;
height:xx%;
}
Hi, i’ve tried this exercise numerous times, but something isn’t right. Attached is a screenshot of my gallery. The title shows up underneath the image when I hover over it. Also, the images are cut off at the top. Just an FYI, my images are sized 900 x 900 pixels. I have divi theme and I’m stuck. Can you help? The home page I’m working on is in draft mode and not the one published.
As your images are different dimensions you will need to adjust the padding values to push the images down and have the overlay the correct size.
Thanks for this useful recipe. I am wondering if there is any way to show title of image in slider .Right now we have “show title” option only when we select grid layout in gallery module.
Divi doesn’t have this out of the box. You would need to create a custom module from the main-modules.php file and add in the title that way
Thank you very much, with your detailed explanations and the gift of the ccs everything came out perfect again thanks,
Thanks Gisela
hi michelle, can you help fix this problem – http://www.drnicolawillis.com/gallery-test/
images are not linking to pages but instead trying to open lightbox gallery, have used CSS from this page. any pointers as to what might be the cause of that much appreciated. thanks
I cannot actually see from dev tools what the issue is. Can you try downloading the included layout and checking that on your set up to see if it works as it should. If it does then compare your code and see where the difference is
hi michelle,
i have copied the CSS into my page that contains the gallery. everything works apart from 1 thing. when i click on the text i can see the url as expected but instead of taking me to the new page the overlay is still opening and it’s giving a ‘image cannot be loaded’ message – i guess this is because it’s using url syntax to open an image file.
how do i stop the overlay/lightbox feature from opening on click and make it link to the page as it should?
many thanks for any help with this.
Hi!
I got stuck at 3.40 in… You mention adding a html link in the captions – but where do I get that?
How do I generate it or find it?
Thank you!
Its wherever you want the image to go when clicked, so if you wanted it to go to this website you would add https://divisoup.com for example
Hello Michele. I used your way to build my page, however there is something I would like to improve. Is it possible to open the related site (the link in the image) after clicking on the hovered image, not a text (link) only?
You can try changing the p.et_pb_gallery_caption styling to p.et_pb_gallery_caption a so that the whole overlay area is clickable
Hey Michelle,
This works fantastic and has produced a fantastic result. The only issue I have is when the site is viewed on mobile the overlay is slightly larger than the image and the images appear aligned to the left (only by a small amount of pixels).
Any idea on how to fix this?
Thanks in advance
Adjust the padding settings in the mobile media query Beau
Hi Michelle, great tutorial, it works perfectly What you suggest is the closest solution to my problem.. I would like to create an Amazon products page in my blog, so I should create an hybrid between a gallery and a portfolio. I tried to use projects and categories but it doesn’t work. My ideal result could be a clickable product image gallery (filterable by category: notebooks, printers, scanners and so on): you enter the page, look at some image of products, click on each of them, and go to Amazon (through my affiliate link, obviously). With your solution I cannot… Read more »
This plugin may work better for you Alessio https://divisoup.com/ppp
Wow! I have been looking for this for sometime now! I have limited coding experience but followed your tutorial step by step. I would like to have my images square (they are 500×500) and although I have set to a grid of 8, only 4 are showing up and the first image is divided in two. Any suggestions would be greatly appreciated.
I have a post coming soon that will adjust the image sizes in the gallery module, keep an eye out
Have you produced this post yet? I have square images…
I didn’t as I create something different within my membership, but you can adjust image sizes by adding the following to your child theme functions.php file. BACKUP first
/* Change gallery image display size */
function ds_gallery_thumbnail_width( $width ) {
return 500; //gallery thumbnail width
}
add_filter( ‘et_pb_gallery_image_width’, ‘ds_gallery_thumbnail_width’);
function ds_gallery_thumbnail_height( $height ) {
return 500; //gallery thumbnail height
}
add_filter( ‘et_pb_gallery_image_height’, ‘ds_gallery_thumbnail_height’);
Hi Michelle,
Thank you very much for this great tutorial
How to add effect lightbox ?
No possible with this particular layout as it removes the et_overlay class that triggers the lightbox
Hi Michelle, I tried this tutorial on http://www.jest.cloud but it didn’t work.
On images is shown the code. Why that?
You will need to make sure the html in the caption field is correct, double check that
Hello Michelle,
Thank you very much for this great tutorial.
I would like to add a CSS Class to my gallery module, so that the CSS only display on this specific module (and not on others).
Would you give me some tips on how I can achieve that without breaking everything ?
I tried some things, but nothing good so far.
Thank you very much and have a nice day !
My Best regards from France ;o)
You can create your own class, add it in the css class field of the custom css tab in the gallery module, then add the same class to the CSS declarations and it will only apply to that gallery
I followed all of your instructions, everything went as instructed right before the CSS entry. Once I entered CSS, the hover over effect did not result in the same outcome as your video shows. It stayed the same as the step before the CSS code paste. I pasted the code to the page as you did.
Anything am I missing? Thanks.
I really couldn’t say without seeing the page and the code. Have you tried downloading the layout and just changing the content?
Hey Michelle,
Thanks for posting this. I was trying to figure out how to achieve this. I have done as you have instructed but I seem to be having issues. Would you be able to help me?
There seems to be a weird issue with the spacing between the rows of each set of images. When I hover over certain images the overlay extends past the bottom of the image and ends just before the next row begins.
I have attached a quick video of the issue: https://www.screencast.com/t/o9eWWWzMXZg
Here is the URL: https://escapenz.co.nz/galleries
Thanks in advance!
This is because your first image has too much text and is pushing the content down. You need to adjust the font size and padding based on your content
Thank you so much! So simple lol. If I want to apply this to an individual gallery, where do I put this code?
Put it in the page specific CSS box for the page the gallery is on, quickest way
Hi Michell, can not this be implemented in full-width portfolios? Because I create a carousel type portfolio, but I could not get it to click on the logos, the user to go to another site was external.
No the selectors would be different for the the portfolio module and also they link to a project rather than an image so you will probably want to JS for that
Hi Michelle This is great but I seem to be experiencing a couple of issues and wondered if you might be able to help please? 1. When I adjust the font padding to move the title down to the bottom of the box (e.g. padding: 60% 5%;) it also moves the background overlay down as well so it hangs off the bottom of the image. Is there anyway to fix the overlay height? 2. When I add the CSS to the page directly it works fine but when I add it to my child CSS page nothing? Many thanks for… Read more »
Kevin you will need to add in a separate value for bottom padding if you want the title lower, so like this:
padding: 60% 5% 10%; (top, right & left, bottom)
With regards to the code in your stylesheet this this generally one of 3 issues:
Your stylesheet is not being queued correctly in functions.php
You have an error in your stylesheet above the code you are adding
Caching
I have no idea what I’m doing! I just wanted to make my class images clickable, and I think I’m on my way with these wonderful instructions. I can’t thank you enough!
Most welcome Helen
Michelle, thanks for the tutorial.
Welcome Allan
Great tutorial Michelle, but is there a way to do this without a full-width grid? I’m also having trouble with my image sizes even at full width. I’ve set them to 900×600 as per the tutorial but they keep getting cropped and off-centred, this changes between the landscape and portrait option of the gallery in divi (not sure if this is a new feature) What can I do?
If you have followed exactly that should not happen. Have you downloaded the layout and just edited the content?
Thank you so much for this informative recipe. It was exactly what I was looking for. I am grateful that, for once, I did not have to pull out any hair to figure it out. I especially appreciate the comments and descriptions about the css.
Glad it was helpful Dena
Hello Michelle, My awesome 4 image grid has turned into an off looking 3 image grid since the last Divi update. Do you have a way to get the 4 image grid back? http://www.achieveIT360.com (home page) Thank you for any ideas.
Hey Andrea, I believe I solved this for you via FB yes?
I have vertical images (book covers) at 345 x 499 px. I’ve set .et_pb_gallery_grid .et_pb_gallery_image width: calc(50% + 1px) to get manageable images. But I am having difficulty figuring out where to adjust the hover width – I need vertical ‘box’ for caption. What am I missing?
I am not fully understanding what you need Alyssa, can you provide a link and explain what it should look like please
I have this same problem, also with book covers. Covers end up overlapped vertically, and the hover effect only covers the top half of the book covers.
If you are using different size images you need to adjust the padding to that it covers the whole image in this section and also for the media queries: 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*/… Read more »
this works well with photo galleries when its a grid but doesn’t work when the gallery is set as a slider, any ideas on allowing slider images to link to external URL?
Jacinta it is designed for the grid layout, the slider has different classes so the styling will not apply
When I add the css code into the image description and add my title and copy in the click save and refresh inside the images where the text would go I see all of the code. Any Suggestions?
Corey the CSS goes in your stylesheet and the HTML goes in the caption field of the image. Just check you have everything in the right place
Hello,
the code works well with 8 images. But if I wanted off with more what needs to change?
I tried to increase the number of successive 8 but you only see the strips.
Make sure you hahve added text to the caption field for the new images Salvatore, they require next to ‘fill them out’
Great tutorial – thanks for all your help…
Hi Michelle,
Just seen your video on “How to Add Links to the Divi Gallery Module and Show Captions on Hover”
which is very good, just wanted to how you accessed the CSS code in the Divi theme
Not entirely sure what you are asking Fred. If you mean the Divi stylesheet, just download and unzip Divi and you will see the stylesheet in the root. If your question is something else do let me know
Hi Michelle! Thanks for this great tip!!!
I have one question:
Is there a way that, when you click on a image of the gallery, the image open on fullscreen lightbox like the “normal gallery” does? (no external link).
Thanks again for your work!!!
I think you would probably need JS for this. It is the overlay that triggers the lightbox and in this tutorial the overlay is hidden so no trigger. You can try showing the overlay and playing with z-index to see if that will work
Hi Gerard,
I have the same question. Did you get it to work with Michelle’s tips?
Kirsten (and Gerard and Michelle), I would like the original lightbox display on click too. Did anyone ever come up with a solution?
Hello Michelle! Thank you for the wonderful tutorial, however I ran into some problem, the 4th row of the grid always has some overlapping issue. I’ve tried switching the images around, checking that the images are all in 4:6 format but still the 4th row always overlaps. Would you know how to solve this? Thank you!
Do you have a link I can look at please?
Hi Michelle,
thanks for this recipe, I love it so much.
I have some problem, the links didn’t work, what should I do?
is it need to update divi with the newest version?
If you check the post and use the most recent CSS it should be fine
I got *most* of it to work.
However, when I hover over the images the nice box comes up, but the only thing I can ever get in that box is what I put into the Media Library image meta data ‘caption’ field. Cannot figure out what I need to do for the title to show as well. Currently all I get is the ‘description’ which I have to put into the caption field in the Image Metadata within the Media Library.
What might I be missing?
Thanks!
Derek the title field is not supposed to shpw, check the html to add to the captions field in the recipe and you will see there is a space for the ‘title’ within the caption field itself
Hello Michelle,
Thanks alot for this tutorial! I have a question maybe you can help me.
On very high resolution screen the gallery rows are overflowing each other. But on my laptop resolution it works perfect.
The website I made is: http://www.dreambus.co
Maybe I doing something wrong?
You will need to adjust the passing for larger screens with a media query, padding: 27% 5%; does it for me on a 1920px screen
Thank you!
Also, how do I show the caption permanently instead of only on hover?
I want to show 6 images in my gallery only and the default grid is showing 4 in first row and 2 in next. How do I only show 3 images per row? URL: http://webworxworld.com/client-demo5/ 2 things I have already tried and don’t work are: 1. I tried to force 3 images per row with Booster Plugin and that setting breaks everything in the gallery module. 2. I tried the following CSS from https://divibooster.com/change-divi-image-gallery-grid-thumbnail-sizes/ but that leaves lots of blank space on the right. Current view on the URL shared above. .et_pb_gallery_grid .et_pb_gallery_item { clear:none !important; } .et_pb_gallery_grid .et_pb_gallery_item:nth-child(4n) {… Read more »
You’ll need to change this:
.et_pb_gutters1 .et_pb_column_4_4 .et_pb_grid_item {
width: 25%;
}
to this:
.et_pb_gutters1 .et_pb_column_4_4 .et_pb_grid_item {
width: 33%;
}
Then you will need to check all the overlay sizing in the CSS and see if it needs adjusting as your images will be bigger
Where do i find the first set of css to change 25% to 33% ?
Also, do you mean overlay sizing css i added from your tutorial or elsewhere?
Also how do I show the hover effect permanently, instead of on hover? I want to show the caption and the effect without hover.
You need to add in that CSS to make the grid 4 columns instead of 3
To change the effect to be always visible you can remove the opacity line from this section of CSS
p.et_pb_gallery_caption {
and remove this section altogether
p.et_pb_gallery_caption:hover {
And yes, check the overlay sizing in the CSS from the tutorial
How would I edit this to make the gallery include 3 pictures in each row?
Check my reply to WebWorx Doug
Michelle, thank you again. You can check the results of using your tips in my site here: http://www.patagoniaimages.com
Great job Marcelo, looks really nice
Thank you Michelle. Nice customization and tutorial.
Welcome Marcelo
I`m using your ideas in my gallery. The caption hover with link was a real cool idea.
Right now I made some mods and found a solution for a small problem.
Sometimes when reducing the browser windows, some images were overflowing from my boxed layout.
Solved by including the following CSS in the Main Element box of the ROW of the gallery .
overflow:hidden;
Thanks again.
Hi Michelle! Very nice tutorial.
I was just wondering how to apply getting the lightbox off of the gallery function on a Gallery>slider (instead of grid)
Which part of the Code stops light box from popping out?
Thanks a lot!
The first section that hides the overlay from memory
Thanks a lot, Michelle! Very nice tutorial!
Welcome Elisandro
How to disable this hover in mobile version and only work on desktop version?
You can do that with media queries Yazid
Your site is fabulous. I am just starting with DIVI and really love the recipes. Thank YOU!
Welcome Anna, I am glad you are enjoying it
Hi Michelle
Thank you so much for the tips and tricks.
I did apply this code for 6 pictures and works great.
However I am not quite happy with the pictures size.
They almost looks like thump size.
Is there any code to apply I can make them appear much bigger!
Thanks advance.
Perhaps you have not used large enough images. Use the dimensions specified in the tutorial. You are also limited but the screen space and the fact that the module uses a specified number of columns, which you can adjust as well with some css
Hi Fantastic
Is there an easy way to have the title (eg Bear) showing always and the subtitle text show on hover?
If you see my response to Lori Newman that should point you in the right direction Paul
Thank you for this great ressource. Is it possible to do the same for images module ?
For the image module I would use the before and after pseudo elements rather than the solution I have used here
Morning Michelle:
Site: http://onsafari.flywheelsites.com/gallery-birds/
I’m having a bit of trouble with hover effect. I want to use effect, but simply to open image in Lightbox view.
/*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;
}
The gallery does not display until I remove position: absolute, but then I lose hover effect.
Can you point me in right direction?
Thanks,
Ben
I can’t seem to see why this isn’t working for you just by using dev tools. Have you downloaded the actual layout and tried with that?
As for opening in the lightbox. The purpose of the tutorial is to stop the images from doing that so I would take a completely different approach to achieve the effect you are looking for
I’ve the same problem, have you found an answer? o-O’
Thanks
As always you make a great job. And I love cooking with you !! <3 Thank you so much.
Welcome Catherine
I love this! It looks great, and the tutorial was easy to follow. I wonder if the same tutorial would work in Extra. I’ll have to give it a try.
This is so great Michelle. Your tutorials are really great, and I use your recipes all the times. This one is great for my photography section, and it´s allready added and working. What I would really like is to have the images square, is it a simple way to do that?
Thanks Finn, glad it is helpful.
SJ has a post on making the portfolio images square so I would say you could modify that to apply to the gallery also, you will probably need to play with the padding on the existing code so the overlay covers the whole image
https://divi.space/divi-tutorials/how-to-change-the-size-aspect-ratios-of-the-portfolio-grid-images/
Thank you Michelle, will check it out
This is awesome Michelle, is there a way to show the title without hovering, and the box effect and when hovering?
Thanks!
Quite possibly this could be achieved with the :before pseudo class Lori, you could look at using the title field to display before hover and hide on hover.
Pretty cool, but is it possible to alter this somehow for the portfolio module as well?
The portfolio module uses projects rather than images so not too sure it would work the same but I will try to look into it when I get time
hello,
any update on making this work for portfolio/projects?
It is on the list and I will be working on some portofolio tutorials very soon so will try to incorporate this
Such a great tip! I have a photography site and I will be using this soon.
Excellent Sander, will look great on a photography site
Great tutorial, as usual. I love the recipe concept and how you show us the end result of what we are cooking up and tell us the ingredients, how long it will take, and then a detaild step by step. I also appreciate the CSS explanations. Perfect! Thank you.
Thanks Bob!
Your posts are always interesting and useful but what makes them really valuable for someone like me who is trying to develop their CSS knowledge is the comments you add to the code – thank you Michelle.
Thanks Clark, and you are most welcome
Hello Michelle, is there a way to make the whole overlay clickable instead of only the tekst/link area?
That would be the topping on the cake
Yes the et-overlay is what does hat and we are hiding it, so remove that property from this section of CSS
.et_pb_gallery_item h3,
.et_overlay {
display: none;
}