Hi Joane, Otherwise, place this in your Divi>Theme Options>Custom CSS code box.   -ms-transform: translate(-50%, -50%); Hi Viktor, I have a fullwidth image at the top of my home page. Open Divi Overlays CPT […] By default, Divi adds this annoying little 1px gray border. We release a full tutorial every Tuesday! When you hover over the picture you see the read more button and you can click and it would lead to the blog post. With those features, you can design an unlimited number of designs. Yes, this is answered many times in the comments. We send out a roundup email once or twice a month with tutorials and new products, so that's what you will get! Hello, just for info I miss info that you need to add class .pa-blog on blog module. say I have 3 pictures in a row, can I have a button that says different things on each picture? Let’s dig in! So let’s get to it. Now to connect a tool tip to the button on hover to negate the need for text and a button. 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. sorry I didn’t explain correctly. I was about to ask – this has been most useful! I assume you are referring to something other than in this post? Resources ... /* Change this color to your own */ background-image: linear-gradient(to right,#0149CC,#00C6FF,#0149CC); /* Change this color to … It’s now the default body text font right? Right, that’s not what the tutorial is about. You set the link in the image module as described in the post. Blog Post Optin Form It sounds like you have the right idea. Professional high-converting custom website design, Use your website to increase client leads and product sales, Premium website hosting, maintenance, and marketing, Get users to your site from your blog, ads, and social media.   top: 50%; }. Hi Laeni, This is so helpful.   transition: all .5s ease; Basically the Title and Subtitle are bottom left but as you hover over you get almost an accordion effect of extra text expanding. Divi image module is awesome But there was something missing. I looked at that, but I am trying to make a full screen header image with 5 possible buttons to choose from.   background-color: #ffffff; You would have to use both, which we mentioned there in the article. So based on a demo I found on the ever-resourceful w3schools.com website, I was able to utilize the Divi Code Module to create 6 very easy to implement, image overlay styles. 10 images where you want a buttom on each image with different text…. Hi Walkman, DIVI Button module hover STYLE 1.dct_btn_v1{ z-index: 2; background: #000000 ... I’m going to go over Five different methods for adding company logos to your website with Divi. By default, the blog module is broken into parts, the title, the meta, and the content. I’m so bad at this, lol. Could you tell me If it is possible to make 5 buttons on one photo. This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories. 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? 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. Hi May, In the case of the Divi Blurb, that’s the et_pb_content selector which has a … i want to have 2 column, each with a different image, text and button. Yeay, Thank you so much!   padding: 12px 24px; Hi Joachim, This code is  moving the combined element that we wrapped together with the jQuery and placing it up over the featured image. Choose the image size, hover style, and opacity. padding: 12px 24px; If you like to style and customize the Divi blog module, be sure to check out the many tutorials we have been doing in our Divi Blog tutorials.This tutorial builds on some of the others. 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. You can also click the Use Visual Builderbutton when browsing your website on t… Thank you. It wil be quite useful to me! height: 100%; How do I add the play icon instead of text? z-index: 9999; Alert Buttons Outline Buttons Split Buttons Animated Buttons Fading Buttons Button on Image Social Media Buttons Read More Read Less Loading Buttons Download Buttons Pill Buttons Notification Button Icon Buttons Next/prev Buttons More Button in Nav Block Buttons Text Buttons Round Buttons Scroll To Top Button Forms I was wandering, how you can place a button AND a text on the image? We want to position our text over our image by using position:absolute. Thank you! I was looking at the “Text On Image” tutorial and got it to work on one image, however, I have 8. If you are using our free Divi child theme, place this snippet into the style.css file. Like a call to action over image. How can i do that? Hi Shahid, Hi Lukas, Just remove that, you can barely see it now but it is still noticeable. I am glad, I hope you can put this to good use!   Hopefully, that makes sense! 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. This unique tutorial will show you how to move the Divi blog grid title, meta, and button up over top of the featured images. Thanks for sharing! Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. I need the image to be static but the buttons to hover. Hi Nelson, great tutorial thank you! Since Divi has not gotten advanced enough to have a hover tab for the image itself, we are going to change the color of the image through the use of image blends. There is also a Button option for putting it over the Image. Blog Post Optin Form As I learned Divi over the years, I’ve searched for a solution to add a button over an image. Is this because it’s not a standard font? This is definitely different. Because we added an overlay to the image (to make it easier to read the text), now we need to do part two of that and make the text a light color. Hi Rachel, Not sure if I missed something, but how do you link the button to another page? .pa-button-over-image:hover .et_pb_image_wrap:hover:before {. background-color: rgba(0, 0, 0, 0.5); You now have a button over and image in Divi! Thanks in advance! The Divi Theme from Elegant Themes.. A video to use for your background. You can simply add some Divi modules, or get creative and design complex popup layouts— the choice is yours! Yes that’s because you are targeting the .et_pb_blog_grid, so just remove the _grid part or remove the whole thing and it will work. You are welcome! (OPTIONAL: I toggled on the image overlay in the design tab and set the icon to transparent and the overlay to a 50% black.). It might be best to use the Call To Action Module. When you hover over one row, only the image changes. Thanks ! Hi Catherine, It is probably coming from the default image overlay icon. I have styled my website better with your CSS. This tutorial and CSS is specifically for the blog. I Have a question, How can we add 2 buttons to call 2 action module? You just have to add :hover in the CSS. Hi, thank you for the post! Join over 4,200 others and subscribe to our helpful Divi videos! Shop Now. Thank you for this post, it’s great! THanks for your help! It’s a Divi quirk. I have two questions: For ... doesn’t matter, only to show on hover over the image. Hi Iggy, I’m not sure what you mean. content: ”; So helpful! THANKS Nelson… so great with the video – because it is much easier for me to understand when I see a video with it. Now You can do this easily by Divi Image Hover module. ... See image. Hi Ashley, Is this something that is a “quick” fix? If you are using the read more button, then you probably want to make it look better. This unique tutorial will show you how to move the Divi blog grid title, meta, and button up over top of the featured images. Edit: working now, worked when I added .pa-blog class to the blog module. Hovering over any of the filter types will bring up 5 buttons for you to press: a question mark, a smart phone, a cursor, a refresher, and a menu button… but will wait for your video . To clarify, the user would only see a button when they hover over the image. 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! I’ve joined your facebook group to learn something new. I know it is not quite obvious, but the image module is doing the work, the button is just more familiar to click. The new module combines features from three Divi modules (image, text, and button modules) and then adds new features to add an overlay and hover effects to images. When someone clicks the button, the background is blurred and grayed out. After working on a DIVI Wordpress website for a client recently, it became apparent that placing an image caption within DIVI's image module wasn't something that could be done out-of-the-box. You can learn all about them here: How To Add Custom CSS Media Queries To Divi. 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. How do I make the buttons square and not round? … Divi – Aligning the fullwidth slider image right Read More » Hello, It Was A Great Tutorial. 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. Sorry for the previous comment it’s not clear at all. Hi Again, if you are using any meta text like author name, categories, date, etc. Make sure to paste it in Divi Theme options, these instructions are in the post . I’m not quite picturing that. Cool stuff! Therefore, it’s very important that we as designers and developers make these buttons appealing and eye catching. Thank you for your reply! Add the CSS class “pa-text-over-image” to the Advanced Tab>CSS ID & Classes>CSS Class. Here’s an example of a popup that’s triggered by a button. Could you please make a video with this….too….? I’m a bit confused when inspecting it, and I don’t know which class is which. On a product page? This works until the page is resized and the div resizes. Hi David, so you also have multiple text links over a single image? However the formatting is messed up on while accessing page on mobile. Thank you man! You can learn all about that here: https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/. If you have a video on how to do this, please let me know!! Because the Css code only works for image on the page…any way of doing this? In this Divi tutorial I will show you how to fix the width of the Divi Theme Builder Post Content module when used with the Divi Builder. 25% OFF all Divi Plugins, Courses, and Child Themes! I hope you can help bro. Also, some crafted layout has been created with so many design variations which you can download from the demo page and use on your site. A Divi section pops up over the site. https://www.peeayecreative.com/add-button-text-centered-over-image-divi Blog Post Optin Form. Thank you for this tutorial! Then just make sure to match that class in each of the image modules! It works great with this solution. transform: translate(-50%, -50%); Probably not a clean code as i don’t have done anything in css. I think it’s great and really looks nice! Hey Nelson, love your work man! And yes – because sometimes you have eg. In this Divi tutorial I will show you how to fix the width of the Divi Theme Builder Post Content module when used with the Divi Builder. Hi Tim, So for example, add “font-family: ‘Poppins’, sans-serif;” in the list of other items in the CSS snippet. Since she wasn’t the first one to ask about it, I thought it was about time I share my tips on this one for all to enjoy. Can you please tell me, how do you place Title text and Excerpt over featured image in *Divi BLOG Module*, that works responsively. How do you add the link to either the button or text? Ignacio Pérez, For sure you can do this. Make Divi Buttons Inline ... the image is the background image of the CTA module, so you may as well make it the background image of the columns and then add text and button modules as needed and even adjust the min heights of the text above the buttons if you ... Join over 4,200 others and subscribe to our helpful Divi videos! If you’re not sure what position absolute does, it positions the element to the top left corner of and relative to it’s nearest positioned ancestor. Is there any way to remedy this? Professional high-converting custom website design, Use your website to increase client leads and product sales, Premium website hosting, maintenance, and marketing, Get users to your site from your blog, ads, and social media, How To Highlight Event Categories By Color In Divi Events Calendar, How To Style And Customize The Divi Post Navigation Module, How To Fix The Divi Theme Builder Post Content Module Width. I found another way to solve it. Just add your link in the image module settings.   z-index: 9999; Is it possible? Text over image Add a link first in the content tab, then the overlay toggle appears in the Design tab. 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! So I had to come up with my own hack. From the Divi Overlays admin section, add a new Overlay and start creating your popup overlay with Divi, just like you would on any typical Divi page. position: absolute; By having the background image blend mode set to Multiply, and the background color set to white – the image will appear normal. In this tutorial I will show you how we use a little custom HTML and CSS to create a super simple image overlay. Hello, font-size: 20px; Was there ever an answer to this question? My friend Leisa Cooper over at www.stanleywebsites.com is a fellow designer and Divi enthusiast who recently approached me about this little tweak in Divi. Now, insert the image like you normally would into … Blog Post Optin Form Once the previous snippet is added and saved, we can move on to the CSS. I would love your suggestion on how to tackle that? You don’t have any option putting your content or image caption over the image using the Divi default image module.   transform: translate(-50%, -50%); Much appreciated! For that you should see my notes at the bottom of the post about using multiple buttons . However, it could get messy and I personally wouldn’t try it. It’s not perfect, but it does work. 1. Actually no, you don’t. Hi Mont, You can create the buttons with this step by step tutorial. You know what to do with the snippet! hi nelson! I’m a little confused, but I think you should have an image in the background of the section, then add a button module. Wish me luck! Do you also know a way to change the font? is there a quick way to set responsive settings, Hi Ravi, – I tried to attached a gif of it. To achieve this, place an image module in your Divi layout.I added a background gradient in the content tab to make the text stand out better. 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 { Div contains a background image - provided at runtime (so can't use img as background), on top of the image is a button. You can try changing the left: 50%; to another number, that should help! Is it possible to do it so, that only the button responds to hover, not the whole image? https://dubaiprogramok.com/aaa/, Not sure if this falls under the same CSS hack… A snippet is just how we refer to a collection of code that you copy and paste. For example “click here” I want “here” in a different font and weight?   transition: all 0.5s; Hello. I like this article it helps me a lot. (Only Sale Of The Year! ) 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. We have a great tutorial on How To Style And Customize The Divi Blog Read More Button, which shows you how to style the link text as a button, add an icon, and change the button text. }. To achieve this, place an image module in your Divi layout and be sure to add a link. Do you have any suggestions, Hi Dan, I’m not sure what you mean, but you don’t really need the Call To Action module anymore. transition: all .5s ease; I couldn’t get the button to work on a full width image. Just set that to transparent in the module design settings. What if I want a different button for each image? The CSS class goes in the module in the Advanced tab. But for multiple photos, you would simply duplicate the code snippet and change the class and the text. Hi Juan, you would need to add :hover in your CSS class. Using the Divi Builder, you have FULL control over all the content, layout, design, etc. 25% OFF all Divi Plugins, Courses, and Child Themes! Thanks! Please let me know, thanks! You will have to adjust the settings as needed for mobile. We will have a video on this published this week! Another thing we are doing is adding an overlay to the image so that the text stands out. HUGE thumbs up from me. Divi image hover module has some exceptional features that give you the advantage of controlling everything within this module. For example, we needed to adjust the margin and padding on the featured image. Hopefully you’re still around to answer a question, but the end of your bonus snippet is missing. I also threw in some nice hover effects. It’s one of my go-to CSS snippets that I use on most of my client sites. Just copy the CSS snippet 8 times and change the CSS selector for each snippet. That’s all you need, so just add that :hover part in the code and then delete the second snippet. .pa-button-over-image .et_pb_image_wrap:before {, background-color: #000000; Is not working. This would not be applicable to the gallery module, you could use the caption instead. Hi Nelson, You really helped with other things I needed on here.   line-height: 1.3em; This tutorial for the Divi Events Calendar plugin will show you how to highlight and style colors of specific events in event categories. But to achieve this kind of blog grid layout, with the date on top of the post images. hello, I am curious since I have multiple photos can I somehow customize each button? I am looking to use the above effect but as opposed to hovering over an image I would like to hover over a text box (divi text module). Sure, so it’s much easier than you may think. it is just how to do that…. this was awesome and is 99% of what I need,,, but, how can I do all 3 things on the same image module? and paste the code there. content: “Click Here!”; Keep up the good work man! width: 100%; }, Hi! You can see my guide here: https://www.peeayecreative.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) {. Also, what is a CSS snippet? Hey, thanks for the quick way of adding text button on image, it works like a charm. How can i add both the button and text over the image? Hi Mark, (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? Adding a transparent overlay to an image, with text on top is a dramatic effect that customizes your website. A new module is added to the Divi Builder, so there’s no need to copy and paste code. You are welcome, Jim!   left: 50%; So add an image to the column background, then add text modules and buttons as needed. Take a look at “Recent Project” in the layout. Just so I understand, do you want to move the “read more” text button up over the image? I have tried a lot but nothing is working for me. how do you do that – ex.   color: #ffffff; I have a question. Hi Nelson, thank you for your quick reply! To achieve this, place an image module in your Divi layout and be sure to add a link. When using the image module, you can simply follow the 16:9 and 4:3 layout to choose what image size you need for each column layout. Hi Spencer, yes that is a good idea for a tutorial, thanks! Just add the CSS class, How To Add Custom CSS Media Queries To Divi, How To Highlight Event Categories By Color In Divi Events Calendar, How To Style And Customize The Divi Post Navigation Module, How To Fix The Divi Theme Builder Post Content Module Width, https://www.peeayecreative.com/how-to-add-custom-css-media-queries-to-divi-for-making-your-site-responsive/, https://www.peeayecreative.com/where-to-add-custom-code-in-divi-css-javascript-php/. Ingredients . You would change the CSS selector for each of the 8 snippets, then make sure they match in the module CSS class. 25% OFF all Divi Plugins, Courses, and Child Themes! By default when you place an image in fullwidth slider it places left side of the text, what if you want to place the image in right and text on left. I’m certainly still around! You could use the ETModules font family to do this though instead of the text. Great post. -ms-transform: translate(-50%, -50%); Step 1: Go to Divi Overlays Posts 1. We also release other helpful tips, freebies, and resources throughout the week. Thank you for a great tutorial man! A step by step tutorial for 3 custom Divi buttons with a nice hover effect. Is there a way of doing this (the text over image) if you have like 8 images on the page? 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. Here are a few example button designs we will be creating easily with the text module. 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? Just use a column with a text module and then two buttons. This will be our default state. Try this: .pa-button-over-image .et_pb_image_wrap:hover:before.   border-radius: 50px; I Have A Question How Can We Add Button To Product Images? Yes for sure, just be sure to add :hover to the CSS for any styles you want when hovering. When I re-size the screen however, the meta starts to get cut off on the bottom. Feel free to send us a message for more help with this. I am not finding that here. Blog Post Optin Form. This tutorial will do some tricks and move the Divi Blog module text over top of the featured image. First approach was to use absolute positioning to place button above image. So maybe use pa-text-over-image-1, pa-text-over-image-2, etc. Set the button styles, background, overlay, image alignment, and lots more. Can you provide the solution to add an anchor link to the button?   font-size: 20px; Hey Laeni, Hi Sebastian, In this tutorial, I am will show you how to style and customize the Divi Post Navigation module with CSS for navigating previous and next posts and pages. An overview of the CTA module would be great will subscribe to YouTube Channel! Open the image module settings of the image directly above the button and set the bottom margin to 0px. What’s exceptional about it is that the hover effect on the image will be activated whenever you place your cursor within the row. This is doing a very special trick. If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the