Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
UPDATE: Check our our newer, better, and more comprehensive tutorial here: How To Place A Button And/Or Text Over An Image In Divi
Another Solution To A Missing Feature
Let’s Add A Button or Text Over An Image In Divi
As I learned Divi over the years, I’ve searched for a solution to add a button over an image. Most of them required adding a separate button module or using the call-to-action module, but that doesn’t work because the image is a background image, which crops weird and is not reliable and background images don’t help SEO. So I had to come up with my own hack. It’s not perfect, but it does work.
You may want to reference my other post about forcing image aspect ratio in Divi. It works great with this solution.
Button Over Image
The Button Is Always Centered Vertically and Horizontally
To achieve this, place an image module in your Divi layout and be sure to add a link. (OPTIONAL: I toggled on the image overlay in the design tab and set the icon to transparent and the overlay to a 50% black.)
Add the CSS class “pa-button-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Next, copy the following code snippet and paste it in your websites.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add button centered over image*/
.pa-button-over-image .et_pb_image_wrap:before {
content: "Click Here!";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #000000;
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
transition: all .5s ease;
}
/*button on hover*/
.pa-button-over-image:hover .et_pb_image_wrap:before {
background-color: #ffffff;
color: #000000;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 1px;
}
Text Over Image
The Text Is Always Centered Vertically and Horizontally
To achieve this, place an image module in your Divi layout
Add the CSS class “pa-text-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Next, copy the following code snippet and paste it in your websites.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add text centered over image*/
.pa-text-over-image .et_pb_image_wrap:before {
content: "This Is The Headline";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 40%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #ffffff;
padding: 12px 24px;
font-size: 28px;
font-weight: bold;
text-align: center;
border-radius: 50px;
transition: all .5s ease;
}
.pa-text-over-image .et_pb_image_wrap:after {
content: "If you want to, you can adjust the position of this text to the top left or bottom or whatevery you want.";
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 55%;
left: 50%;
width: 80%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
border-radius: 50px;
transition: all .5s ease;
text-align: center;
}
/*this changes the opacity of the image*/
.pa-text-over-image img {
-webkit-filter: opacity(40%);
/* Safari */
filter: opacity(40%);
margin-top: -1px;
}BONUS! Image Zoom & Rotate
Here’s the Bonus CSS Snippet For the Divi Image Zoom and Rotate Effect Seen On This Post
You probably noticed the hover effect. It’s one of my go-to CSS snippets that I use on most of my client sites. Just add the CSS class “pa-image-zoom-rotate” to the Advanced Tab>CSS ID & Classes>CSS Class.
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate .et_pb_image_wrap {
overflow: hidden;
}
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate img {
transition: all .5s ease;
}
/*zoom and rotate image on hover*/
.pa-image-zoom-rotate:hover img {
-webkit-transform: scale(1.05) rotate(1deg);
-ms-transform: scale(1.05) rotate(1deg);
transform: scale(1.05) rotate(1deg);
transition: all .3s ease;
}How To Use Different Text On Multiple Images
The #1 Question From the Comment Section
Since this seems to be the #1 question on my blog, I thought I should address it. To use this method on more than one image, simply copy the CSS snippet as many times as you need (the number of images) and then change the CSS selector for each one. So maybe use pa-text-over-image-1, pa-text-over-image-2, etc. Then just make sure to match that class in each of the image modules!
What About Tablet and Mobile?
The #2 Question From the Comment Section
To change the text or any styling such as font size on tablet or phone, you will need a CSS media query. You can learn all about them here: How To Add Custom CSS Media Queries To Divi
How Can I Add More Than One Button?
The #3 Question From the Comment Section
Honestly, if you are are needing more than one button, then you should just be using a column with multiple button modules. So add an image to the column background, then add text modules and buttons as needed.
Can you please tell us in details.I don’t understand
Hi Samar, is there something specific you would like explained better?
What if I want a different button for each image?
Hey Megan,
Great question, all you have to do is change the class for each one. So for example, you can say .pa-button-over-image-1 and .pa-button-over-image-2 and keep the snippet the same except for that class, then change the words, colors, link, etc. for each one. Hopefully, that makes sense! 🙂
I’m so bad at this, lol. If all the information is in the dashboard Custom CSS and I change the Class CSS to say “.pa-button-over-image-1” then where do I customize that?
You can customize the words in the CSS snippet. You make sure the class and snippet have the same name. Also, remember not to use a . in the Divi CSS Class field. Feel free to send us a message for more help with this.
Thank you! I was about to ask – this has been most useful!
Hey Laeni,
I’m so glad you found it helpful!
Hi Nelson! Great tutorial, thanks!!
Not sure if I missed something, but how do you link the button to another page?
Thanks!
Hi Joane,
Just add your link in the image module settings. I know it is not quite obvious, but the image module is doing the work, the button is just more familiar to click.
I can’t find the option to toggle the overlay option in the image module.
“OPTIONAL: I toggled on the image overlay in the design tab”
It’s a Divi quirk. Add a link first in the content tab, then the overlay toggle appears in the Design tab.
This is perfect thank you!! Do you also know a way to change the font? It’s now the default body text font right? I would love to make it the header font. Thanks in advance!
Hey Marloes,
You are welcome! To change the font, just add the font family to the CSS code along with the other properties. So for example, add “font-family: ‘Poppins’, sans-serif;” in the list of other items in the CSS snippet.
Thanks for the response! I tried it with Amatic SC (a Google Font) but the font changes to something else, looks like Arial. Is this because it’s not a standard font?
Most likely it is being controlled by another font setting, so go ahead and use !important like this font-family: ‘Amatic SC’, cursive!important;
I got it! It works when I put font-family: Amatic SC instead of font-family: ‘Amatic SC’ 😀 thank you for your help!
How do I make the buttons square and not round?
Hi Laeni,
This would be controlled by the CSS border-radius, so change that value to 0px.
Thanks Nelson.
Text over image
What if you have 10 image that should have different text-buttoms…. how do you do that – ex. in a image-gallery..
Could you please make a video with this….too….?
This would not be applicable to the gallery module, you could use the caption instead. But for multiple photos, you would simply duplicate the code snippet and change the class and the text. For example, change pa-button-over-image to pa-button-over-image-2 in both the module and the snippet. We will have a video on this published this week!
THANKS Nelson… so great with the video – because it is much easier for me to understand when I see a video with it. And yes – because sometimes you have eg. 10 images where you want a buttom on each image with different text…. it is just how to do that…. but will wait for your video 🙂
What do I have to do to get the button on a fullwidth image?
Hi Ashley,
I assume you are referring to something other than in this post? Can you be more specific?
I have a fullwidth image at the top of my home page. I don’t want to use the fullwidth header option because it isn’t customizable enough. I tried using this code to get a button on the fullwidth image but it didn’t seem to work. I’m wondering if I need to change something in the code to get it to work?
Hello,
Was there ever an answer to this question?
Hi Yoona,
What would you like to know?
Hi Ashley,
I’m a little confused, but I think you should have an image in the background of the section, then add a button module.
Hey, Nelson,
How to make this work with a blog posts module? Is it possible?
Thanks a lot. Have a nice day.
Hi Marina,
Just so I understand, do you want to move the “read more” text button up over the image? I’m not quite picturing that.
Hey Nelson,
sorry I didn’t explain correctly. I mean https://poosh.com/ like they did with their posts. When you hover over the picture you see the read more button and you can click and it would lead to the blog post.
this was awesome and is 99% of what I need,,, but, how can I do all 3 things on the same image module?
i want to have 2 column, each with a different image, text and button. I cant seem to add 2 css classes with a coma
Hi Sebastian,
To add more than one class to in Divi, you don’t need a comma, but just a space.
Thank you for this post, it’s great! I have two questions:
1. How do you add the link to either the button or text?
2. What if I need two different styles on one line of text. For example “click here” I want “here” in a different font and weight?
Thanks !
Hi Amalialala,
You set the link in the image module as described in the post. As for your second question, it would take a lot more CSS to do that and at that point, it would not be worth it in my opinion.
Hello, thanks for the tutorial. How do I make the text appear only when I put the mouse over the image?
Hi Juan, you would need to add :hover in your CSS class. Try this: .pa-button-over-image .et_pb_image_wrap:hover:before
Hopefully you’re still around to answer a question, but the end of your bonus snippet is missing. It’s a really cool effect but I can’t implement it as is.
Awesome stuff though, mate.
Hey Adam,
I’m certainly still around! We have tutorials each Tuesday and quick tips on Thursdays. I updated the code in the article, not sure how that got cut off but you should be all set now!
Hello,
Firstly thanks for all. Is there any option to add text and button at the same time? Like a call to action over image.
Hello,
You would have to use both, which we mentioned there in the article. However, it could get messy and I personally wouldn’t try it. It might be best to use the Call To Action Module.
I like this article it helps me a lot. Cool stuff! I’d like to know if by adding text Over An Image can google recognize it?
Thank you Zea,
Yes, these are just pseudo classes. They can actually improve SEO, in a technical sense, so it’s positive, not negative.
Yeay, Thank you so much! I’ve joined your facebook group to learn something new.
Is it possible to not have the button centred? so you also have multiple text links over a single image?
Hi Rachel,
You can try changing the left: 50%; to some other number, that should work!
Hi Rachel,
You can try changing the left: 50%; to another number, that should help!
Hi Nelson, great tutorial thank you! I was wandering, how you can place a button AND a text on the image? Please let me know, thanks!
BR
Hi Lukas,
I’ve answered this in another comment, basically if you want to do that I wouldn’t bother, I would just use the image in the background of the column and set a text and button, or use a call-to-action module. If you really want to though, you can use text on the :before option, and make the :after into a button.
Hi Nelson, thank you for your quick reply! I saw that just after sending my question, sorry xD Ok call-to action-module looks good but , how can I target the background picture of the column and apply the zoom-in effect there? Please let me know. Thank you very much! All the rest is great!
hello, I am curious since I have multiple photos can I somehow customize each button? say I have 3 pictures in a row, can I have a button that says different things on each picture?
Hi Tom,
Sure, you can just add a different class to each image, then copy the code three times and add that same class in the CSS selector of each snippet.
Hello, It Was A Great Tutorial.
I Have A Question How Can We Add Button To Product Images?
Thanks
Walkman Azimi
Hi Walkman,
I’m not sure what you mean. On a product page?
Hey, thanks for the quick way of adding text button on image, it works like a charm. However the formatting is messed up on while accessing page on mobile. is there a quick way to set responsive settings
Hi Ravi,
You will have to adjust the settings as needed for mobile. If you need you you can check out my tutorial on CSS media queries: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
Hi Nelson,
Thanks for sharing! Great post. Is it possible to make the text invisible (or zero opacity) before hover and have it visible after hover?
Hi May,
Yes for sure, just be sure to add :hover to the CSS for any styles you want when hovering. .pa-button-over-image:hover .et_pb_image_wrap:hover:before {
Hi Nelson,
I’m trying to get the front o to appear only on hover, I’ve tried the above with no luck. Any tips?
Hey Maritn,
Could you please share the URL in order for me to understand the query accurately?
Great solution to an all time wanted feature. HUGE thumbs up from me. Been needing this for a long time now. Much appreciated!
I’m glad you like it!
Hi,
Can you please tell me, how do you place Title text and Excerpt over featured image in *Divi BLOG Module*, that works responsively.
I can’t find it anywhere.
Please
Hi Nathan,
That will involve some hacking, but I can certainly do that. I will make a tutorial.
Hello. I am also inquiring about what to do if I want a different button for each image. I get where to change the class for each one at, but where does the CSS go – the dashboard on in each individual module for the image? Also, what is a CSS snippet? If you have a video on how to do this, please let me know!!
THanks for your help!
That seems to be the hottest question on the blog 🙂 You should always place your snippets in the Divi Theme Options (see this guide: https://wordpress-292293-1617718.cloudwaysapps.com/where-to-add-custom-code-in-divi-css-javascript-php/). A snippet is just how we refer to a collection of code that you copy and paste. The CSS class goes in the module in the Advanced tab.
Hi, thank you for the post! I have a question. I would like that the bottom that i will call “see more” only appears when i put the mouse on the image. (It is a tour option so when the people put the mouse on the image i would like that the bottom “See more” can be seen) How can i do that?
Thank you man!
Ignacio Pérez
For sure you can do this. You just have to add :hover in the CSS. So copy the snippets but add in :hover like .pa-button-over-image .et_pb_image_wrap:hover:before
Hey Nelson, love your work man!
If you are looking for new ideas for Divi tutorials would love to see something like the hover effect on the images this website..https://wanderers.qodeinteractive.com/
Basically the Title and Subtitle are bottom left but as you hover over you get almost an accordion effect of extra text expanding. – I tried to attached a gif of it.
Have had a try with hover effects but doesn’t look as slick as this one.
Thanks!
Hi Spencer, yes that is a good idea for a tutorial, thanks!
Is there a way of doing this (the text over image) if you have like 8 images on the page? Because the Css code only works for image on the page…any way of doing this?
Yes, this is answered many times in the comments. Just copy the CSS snippet 8 times and change the CSS selector for each snippet.
Hi Nelson,
You really helped with other things I needed on here. Sorry for the previous comment it’s not clear at all. I was looking at the “Text On Image” tutorial and got it to work on one image, however, I have 8. I tried to figure out a command/code that I can use so that it works the same except the name of the content is different on each image i.e image 1 – content: “pie” and image 2 – content: “jam” but it didn’t work. Is there any coding that I can use to make the code on the Custom Css (on Dashboard) versatile to be manageable for each image? It looked great for the one and I would love it to work for the other 7. Thanks. Much appreciated.
Hi Magalie,
It sounds like you have the right idea. You would change the CSS selector for each of the 8 snippets, then make sure they match in the module CSS class.
hi nelson! great tutorial, great work thanks!!
how can i change the fonts size for mobil view?
Hi Viktor,
For that you would need to use a media query. You can learn all about that here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/
Legend Nelson, been struggling for a while with a two column layout with a text and a button, The button(s) are a big help! Now to connect a tool tip to the button on hover to negate the need for text and a button. Wish me luck! An overview of the CTA module would be great will subscribe to YouTube Channel!
Thank Michael, for some reason I very rarely use the CTA module, I think probably because with column design settings now we can do the same there, but thanks for the suggestion!
Hi,
Great Post, Thanks for SHaring!
I Have a question, How can we add 2 buttons to call 2 action module?
Hi Shahid,
There’s no way I could do that because it would mean modifying the Divi module, but you could use two buttons in a column instead!
Is there any way to center a separate button to call 2 action module in a column?
I’m not sure what you mean, but you don’t really need the Call To Action module anymore. Just use a column with a text module and then two buttons.
Thank u so much!
Highly Appreciated!!! 🙂
So helpful! That’s two times you’ve saved me today. Kudos to you.
You are welcome, Jim! Always glad to help people save time!
Hi Nelson,
Thanks for this great tutorial. I have styled my website better with your CSS. Could you please help me, how do I disable following part on tablet and mobile device:
.pa-text-over-image .et_pb_image_wrap:before {
content: “This Is The Headline”;
Regards,
Asheq
Hi Asheq,
Sure, so you would want to use a CSS media query for that. You can see my guide here: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/ So if you only want this for desktop, use @media (min-width: 980px) {
Thanks Nelson it worked perfectly !!
Wonderful, glad to help!
Thank you so much! this helped to make 1 button. Could you tell me If it is possible to make 5 buttons on one photo.
I need the image to be static but the buttons to hover. I have tried a lot but nothing is working for me.
Hi Dóri, 5 buttons on one image? For that you should see my notes at the bottom of the post about using multiple buttons 🙂
I looked at that, but I am trying to make a full screen header image with 5 possible buttons to choose from. When I do it the way you said in the bottom of the post, it doesn’t let me make the image full screen.
Why not just use a section with a background image, a row, and 5 buttons?
I couldn’t get the button to work on a full width image. Please help!
Hi Catherine,
It sounds like you are using the wrong module, you should be using the Image module. Then it will work 🙂
hy, this was a great tutorial, works fine except one thing, my button has two words, when i hover the thw words move one under the other and i want the words to stay on the same line. How can i do that? Thank you
Hi Alex, it sounds to me like there is not physically enough room for the button text, so maybe make the space wider or make the text smaller.
Hi
i changed your code as to display a button only when hovering.
Probably not a clean code as i don’t have done anything in css.
/*add button centered over image*/
.pa-button-over-image .et_pb_image_wrap:before {
background-color: #000000;
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
transition: all .5s ease;
}
/*button on hover*/
.pa-button-over-image:hover .et_pb_image_wrap:before {
content: “Naar de winkel>”;
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #ffffff;
color: #000000;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
letter-spacing: 1px;
}
Sounds good, thanks for sharing!
How do I add the play icon instead of text? I am not finding that here.
Hi Tim,
Right, that’s not what the tutorial is about. You could use the ETModules font family to do this though instead of the text.
Hi. Can you provide the solution to add an anchor link to the button?
Hi Iggy, I’m not sure what you mean. You can link to any anchor by adding the hashtag + ID like #section1 in the link input field.
Hi. Is it possible to do it so, that only the button responds to hover, not the whole image?
Hi Zol,
Yes, just move the :hover selector in your code like .pa-button-over-image .et_pb_image_wrap:hover:before {
well, no change 🙁
could you take a look pls?
https://dubaiprogramok.com/aaa/
Hi Nelson
Thanks for all your amazing tips!
Not sure if this falls under the same CSS hack…
But to achieve this kind of blog grid layout, with the date on top of the post images
I would love your suggestion on how to tackle that?
Cheers,
Edwin
Hi Edwin,
You’re welcome, glad you are enjoying them! This is definitely different. It’s harder than you would think to create this. If I spend some time on it I’m sure I could get it and I will share that as blog post if I do!
Hi
This is perfect exactly what i need!
Only issues is that when i hover there seems to be what looks like a plus symbol behind the text. I cant seem to see where this comes from at all?
Any idea how to fix this?
http://ryan-design.co.uk/dk-test-2/ link to see what i mean
Hi Ryan,
It is probably coming from the default image overlay icon. Just set that to transparent in the module design settings.
Thanks lad your a legend!
I see it now, and now i kinda feel silly hahahaha thanks for the reply though!
No problem, don’t feel silly!
Could you give the code for just having a button show up on the hover?? To clarify, the user would only see a button when they hover over the image.
Hi Kellmo,
Sure, so it’s much easier than you may think. Notice how each code snippets are similar, but one has :hover. That’s all you need, so just add that :hover part in the code and then delete the second snippet.
/*add button centered over image on hover*/
.pa-button-over-image:hover .et_pb_image_wrap:before {
content: “Click Here!”;
line-height: 1.3em;
z-index: 9999;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: #000000;
color: #ffffff;
padding: 12px 24px;
font-size: 20px;
font-weight: bold;
border-radius: 50px;
transition: all .5s ease;
}
Hi! Thank you for a great tutorial man! Just have a quick question. How can i add both the button and text over the image? When i use both css codes, the heading is going into my button and the text i want to use in the button disappearing… I want my button in the middle and heading on the top. Is this something that is a “quick” fix? 🙂
Hi Joachim,
I’d have to see a link, but to be honest it sounds quite crowded and may not physically be enough room for that.
Thank you for your reply! I found another way to solve it. Keep up the good work man! Learn alot from you.
Glad to hear it! I will do that!
I believe i have the newest install of divi builder. My Custom CSS a Before, Main Element and After section. When I past your code it gives me an error at the beginning of “an expected RBrace” and at the end an error of “unexpected token “}”. Do you have any suggestions
Hi Dan,
You can’t add CSS like that with classes to the modules, since the modules are already their own CSS classes. Make sure to paste it in Divi Theme options, these instructions are in the post 🙂
Awesome! very helpful. Thanks so much!!
Great, you are welcome!
Can we add text on the specific position of image like at the top or bottom?
Yes we can do that by changing the value of the top and the left property in the above code. Please try changing the values in the code and let us know how it goes. 🙂
Hi, this works out very well. Unfortunately the WPML Plugin does not recognise the text content which hovers the image. How can I solve this problem?
I doubt you will be able to get that to work since this is using the CSS pseudo class. The only option is to explore using an actual button module positioned over the image but it will not be easy at all.
Hi Ramu
Thanks so much for your instructions. Question: Is it possible to have the overlay text just on the hover?
Thanks already!
Hi Flavian, you can check the other comments, we explain and give snippets for this.
I have a question. I am new to all this. And I am trying to add this button, and getting ready to scream, or maybe already have. When I go to add the Custom CSS, I have the option for “Before” “Main Element” and “After” Which one do I put the css code in? ALso when I paste it in, I get a red box that says Expected RBRACE, and at the bottom another red box Unexpected token “}” Any ideas?
Hi Bre,
You have good questions, but you really don’t need to worry about that until you get to that point. If you follow the tutorial the code uses the :before and :after and you can just follow it. As for that RBRACE it means you are placing the code in the wrong place, so be sure to place code in Theme Options.
How can I give the button a font I uploaded (custom font)?
Hi Gabriel, Yes can certainly declare a font family in the code if you want.
Hi Nelson,
does this work with fullwidth image modules? i tried the text one and i cannot get it to work. I have followed all instructions.
thanks
I’m not sure why you would use a fullwidth module though, I can honestly say I have never used one in my entire career. Just use a regular image module.
I would like to change the font in the second text area. I tried inserting font-family: fontname ; directly above the font-size statement, but it failed to change the font. Is there something else needed to do this? Thanks in advance for any insight you can provide.
By the way, I was able to locate an easy way to insert the equivalent of a carriage return in a line of text. Here is any example:
.text-over-image .et_pb_image_wrap:before {
content: “Point West Office Space \A Sacramento, CA”;
white-space: pre-wrap;
The secret was the \A and then the white-space statement.
Hi Robert,
I replicated the steps given in the guide on my end and I am able to change the font-family by giving the font-family property. Please make sure you are placing the property in the right way and if you are using the font which is not in Divi, make sure you have uploaded the font first.
Also, you are correct that placing the \a and the white-space pre-wrap together will provide a line break but then we cannot provide the differentiation in the properties that are required to display heading, paragraph combination.
Hey,
I love your tutorials!
This is great however when I view it in Safari both on mobile and desktop it is not displaying the text.
Any help would be appreciated.
Many thanks
Hi Harrison,
I am afraid that I am not able to replicate the issue on my end so could you please try using a different device and see if you are facing the issue or not?
Hi Nelson,
Your tutorials are all very interesting and valuable.
Would you please help to display text on my slider images.
I am struggling for this.
https://honyakuservices.com/
Hi Yangba,
As I could see, in the slider you have placed the image inside the anchor tags at a place where the content or display text should be placed and the image that you have placed their should go as a background image of each slide. Please correct these placements and your issue will be resolved.
Let me know how it goes.
Hi Nelson,
Is there a way to add a call to action button on top of a looping video?
Hey Niel,
We need to check this as well as we haven’t tried to work on something like this but will get back if we plan to.
Hi great resource, how would I get the text/box to appear on hover only. As in only able to see it when hovering over the image.
Hey Martin,
You can set the visibility to hidden in the before code and in to hover code, you can set the visibility to visible and you will achieve the functionality you need.
Hi, wonderful code !
Is it possible to have button style like ‘et_pb_button’ apparence ?
Hi Gedek!
I’m afraid we cannot add the class et_pb_button in the Image overlay button to replicate the Divi button exactly as it is created with before tag. However, you can add the CSS properties in the above code from the Divi button.
Hi Martin,
Can you make two buttons, one above the other, centered over the image?
If you mean with this tutorial, yes for sure, just style them both as buttons.
Hi Nelson,
I’m trying to use the zoom in effect on a background image in a column. The result I get is that it zooms in the whole entire column, but I just want the effect to zoom in on the column background image. Is this possible?
Thank you!
-Rachel
Hi Rachel!
You need to set the background-size to over 100% on hover. Go to Column settings > Advanced > Custom CSS > Main element, and add the following code in hover state:
background-size: 140%;
transition: all 0.5s ease;
Let me know if it helps.