![]() ![]() One final step to make this actually work is to place a code module on your page and place the following custom CSS code into it.While the preceding examples have shown ways to use a color overlay for large images, such as hero header-style options, that’s not the only way to make the most of this technique. I have used the following styling setting for this button:įor the position, I use bottom center with a vertical offset of 15%. Place a button module under your text module and give it the following CSS class “divi-image-overlay-item”. Under position, I use the same settings only in the location I choose center. In the advanced tab, I use the same CSS class (divi-image-overlay-item) as previously. So that the text sits a bit away from the edges. This will be the overlay text for the image.įor the text module, I add left and right padding of 35px. Place another text module below the last one and add some text to this module. You have to play with the vertical offset value depending on your image dimensions. Set the location to top center and the vertical offset to 22%. Navigate to the advanced tab and place the CSS class: divi-image-overlay-itemĪfter that expand the Position tab and Set the Position to absolute. I have used the following settings for this title: Step 3: The overlay heading textĪdd a text module under your image and place an h2 title in the text field. If you need to open the image module then switch to wireframe view (left-bottom icon) or open the layers panel (right-bottom icon). Note: The divider module is now on top of the image module and you can not target the image module to open it. Now head to the design tab and under Sizing set the height to 100%.Īfter that go to the Advanced tab and set the position to absolute. If you want a transparent color so the background color shines through the background image then you have to set a transparency, you can do that on the right side of the color window. You can add a background or a background gradient color. Under the image module you can place a Divider module, we will be using this for the image overlay color.ĭisable the setting Show Divider under Visibility.Īfter that expand the Background tab. Then go to the Advanced tab and place the CSS class divi-image-overlay. After that go to the design tab and Under Spacing set the bottom margin to 0px. Open the image module and place an image under the image tab. Inside the column, place a new image module. Go to the Advanced tab and place the following CSS class divi-column-overlay. Start by adding a section and a row, I use a 1/3 column structure but you can use any structure you like. We are going to create an overlay image with inside a title, text, and a button. How to create an image overlay on hover with a title and button On the hover overlay color, you can set your overlay image color. If you do not want an icon on your overlay then you can just set the color to transparent. That’s why we did that in the previous step.įrom here it is very straightforward, enable the Image overlay and all the options will be visible. The overlay tab will only be visible when you add a link to your image. Then expand the Link tab and place either a link or a dummy link into it.Īfter that navigate to the Design tab and expand the Overlay tab. Just place an image module on your page and add an image to it. This is very easy to do and does not require any custom code. Under the background color, you can change your own color. Now place a code module under your image and copy/paste the following code into it: īackground-color: rgb(233 75 0 / 50%) /* set you overlay color */ Place the following CSS class: divi-image-overlay-bg. Place an image in it and go to the Advanced tab. Place an image module on your page and open it. If you just want to add transparent background color on top of your image follow these steps. How to create an image overlay on hover with a title and button. ![]() How to create an image overlay on hover. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |