Hi,
I am trying to build a module with title over the image like this to display my web stories. To achieve this, I did the following:
1.) Inserted an inner row inside a row.
2.) Inserted module image shortcode inside parent row.
3.) Inserted module title(white color) inside inside child row.
4.) Made the child row absoluted and positioned it bottom.
- Now first thing, I have to use a transparent gradient black image overlay(image effects) so that my white title is visible even if the image behind it is lighter in color. When I select Overlay option(in blend) from image filter, it messes up the image and it doesn’t work as an overlay. So I switched to the Darken option and it works perfectly, I can change the opacity to 100(in overlay it’s always transparent regardless color opacity). But now the problem is that the darken option covers the title also even if the image is behind the title. I mean the effects are only applied to image, why is it covering the title.
- Secondly, I am unable to select the title element. I have to move my mouse quick to the element section(row|coloum|element) before it disappears or double click the element to be able to select it. It’s very annoying. So I disable the absolute option temporarily if I want to make any changes to the title or anything inside the child row.
I had to tweak with the inner row’s z index(999) in order to remove the effect from title. It’s just a hack, not an efficient solution. Why is it happening?
Please see this video (change quality to 720p).
Thanks.
Hello @prateek!
There is no bug with the blend color over the images because they are only some effects and not what you’re thinking about. I will add this query to our improvement list!
If you click on every element, then it will appear to select the row/column/element.
Thank you!
Hi,
1.) I thought so, it can’t be a bug. But I can’t understand why did the darken effect appear over the text. Is it because I set the child row to absolute? But it’s still not making sense to me because everything inside the child row appear above the image that is in parent row. And, when I apply darken effect to the image it hides all the child row elements underneath the effect. Surprizingly, it doesn’t occur when I select overlay effect instead of darken. It’s very confusing. I mean if one effect is applied to the image only in parent row, why does the other effect cover the child row elements as well?
2.) If you’ve seen the video I linked, you’d notice when a I set the child row to absolute and apply the darken effect to the image present in parent row, the “row/column/element” for the child row set to absolute, disappears after appearing for a millisecond when I click on it.
You’re saying the overlay effect for image only covers the image while the darken effect covers everything over the image set with absolute position?
