create text appears with hover

Update: Since this last post I found a page, https://greenshiftwp.com/understanding-overlay-hover-effects-and-custom-hover-class/ on how to do this and have made good progress.

https://www.signageindustries.com/new/1334-2/

Several bugs I can’t seem to find. I submitted a bug report somewhere that I found the greenshift page above to lack instructions on how to alter the z-indexes for both the image and the overlay in order to get it to work.

Then I went on to create more overlays and I could not manage to make enough changes to z-indexes. I would fix it by adding this css to the file.

#gspb_container-id-gsbp-727b34e8-2bf8.gspb_container>.gspb_backgroundOverlay {
    z-index: 9999;
}

I’ve searched high and low and I can’t find where I managed to set this on the first one I did, and now cannot repeat it on subsequent overlays.

Where could it be?

The other issue is that I have inserted a container link onto the large image on the right exactly the same way I did it for the other two smaller pix on the left,. It’s there in the admin, but it’s dead on the live side. No link.

This effect doesn’t require any custom code. It’s a bit tricky and it uses CSS transformation options. Here is code example.

<!-- wp:greenshift-blocks/container {"id":"gsbp-e8b8111e-b8d9","background":{"image":["https://api.lorem.space/image/shoes?w=1000\u0026h=1000"],"size":["cover"],"positionImage":[{"x":0.5,"y":0.5}]},"overlay":{},"blockWidth":{"customWidth":{"value":[],"unit":["px","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":"custom"},"className":"hoveredclass"} -->
<div id="gspb_container-id-gsbp-e8b8111e-b8d9" class="gspb_container gspb_container-gsbp-e8b8111e-b8d9 wp-block-greenshift-blocks-container hoveredclass"><!-- wp:greenshift-blocks/container {"id":"gsbp-3eb6907f-5767","overlay":{"color":"#ff0000","opacity":0.5},"spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[50],"right":[50],"bottom":[50],"left":[50]},"unit":["px","px","px","px"],"locked":true}},"csstransform":{"opacity":0,"opacityHover":1,"hoverClass":"","time":"0.5"}} -->
<div id="gspb_container-id-gsbp-3eb6907f-5767" class="gspb_container gspb_container-gsbp-3eb6907f-5767 wp-block-greenshift-blocks-container"><div class="gspb_backgroundOverlay"></div><!-- wp:greenshift-blocks/heading {"id":"gsbp-b157350e-d3ed","typography":{"textShadow":{},"color":"#ffffff","alignment":["center"]}} -->
<h2 id="gspb_heading-id-gsbp-b157350e-d3ed" class="gspb_heading gspb_heading-id-gsbp-b157350e-d3ed ">GreenShift - Page-Building Gutenberg Blocks</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->

Check Advanced – Css transform options in inner container and you will see how it works. It uses opacity 0 on init and 1 on hover

Tried this on the first image. It broke the effect. I rolled back to yesterday’s code and it’s still broken. Refreshed Chrome cache. Didn’t help.

To do what you suggested, I reset the Position changes I’d made and in CSS Transform changed the opacity in normal view to zero, and on hover to one. It’s changing the display of the image, not the display of the overlay.

I have no idea why it isn’t showing that I went back to yesterday’s version. Is there more cache involved? I don’t have a caching plugin installed and I refreshed Chrome’s cache.

https://www.signageindustries.com/new/

I’ll look at it again later.

UPDATE: After about a half an hour the live side started looking as expected, the way it had been looking in the editor all along.

SECOND UPDATE: I tried it again on this page:

https://www.signageindustries.com/new/1334-2/

I changed the opacity on the container the image is in to zero in normal view, 1 to hover. I made the image within that container one in normal and one in hover. Same problem. The image has disappeared and reappears on hover, while the overlay effect never shows.

• This reply was modified 1 year, 11 months ago by keress.
• This reply was modified 1 year, 11 months ago by keress.

I don’t see that you used anything from block which I sent to you. Your setup is totally different. Please, copy code which i sent to you, paste it in editor (just ctrl+V) and investigate it

I don’t know where to place this, and in which editor. The block editor, or the FSE Editor. And where in the code does it belong?

You need to place it on page where you need it, directly in editor

It’s the same as before.

https://www.signageindustries.com/new/test5/

It’s just doing what it’s being told to do. Not showing till we hover. We only want the overlay to not show till we hover. Not the image. That should constantly show. Like this:

https://www.signageindustries.com/new/

If you want to show only text on hover, why did you add image inside hover container?

This is page where I added code which I sent to you

https://greenshiftwp.com/test-string/

It’s working exactly like you need. It shows hover text.

Remove image block from your page and add image as background in parent container

I sent this response in an email. Perhaps it’s in moderation:

I created images because I could see nowhere to input text within the menu.  Where is that?  Or did it just exist in that special code you sent me?  Ah, I see now that’s the case.

Honestly?  I might be inclined a year or two from now to take the same approach I did.  It’s unlikely I’ll remember where your code is.  And it might even be less work to do it the way I did and add a few lines of CSS to change z-indexes. 

I’m trying to decide if I should rebuild the page using your code. Is there some way, with the way I’m doing it, to get the white to just fade in, the way it works with your code, than come in with that circle effect? I’ve been experimenting and can’t find anything.

And I’ve discovered how to eliminate having to add css code. For those taller images I used the ‘container’ instead of the CSS grid container. Re-doing it with that, the overlay works by using the Position menu and setting Z-index to ‘relative’ and -99 for the image.

If there’s a way to get the fade in effect instead of the circle in effect, I will be set without having to use a lot of cumbersome code.

EDIT: I see now, just starting with your code I can study the menu that goes about creating it. You’re using Advanced Heading, and then the image will be a background in the overriding container.

• This reply was modified 1 year, 11 months ago by keress.

Adding to the above: It would be really helpful if I could tell what kind of Containers are being used in your code. Is it the first ‘Container/Wrapper”, or the second CSS Grid? If they just used different labels it would be helpful to someone like me trying to replicate it.

After many experiments I’ve got this to work the way I like. I found it better to use regular images than background images to keep the grid intact. Using background images it was unreliable where the hover opacities would fall. I used the CSS Transform, and Position to make the overlays Absolute with a high Z-Index.

https://www.signageindustries.com/new/

Thanks for the help.

<!-- wp:greenshift-blocks/container {"id":"gsbp-ce988f5c-2a8b","flexbox":{"type":"grid","enable":false,"gridcolumns":[2,null,null,1],"columngap":[0],"rowgap":[0]},"blockWidth":{"customWidth":{"value":["100%"],"unit":["px","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":"custom"},"align":"full"} -->
<div id="gspb_container-id-gsbp-ce988f5c-2a8b" class="gspb_container gspb_container-gsbp-ce988f5c-2a8b wp-block-greenshift-blocks-container alignfull"><!-- wp:greenshift-blocks/container {"id":"gsbp-0e537274-534c","blockWidth":{"customWidth":{"value":["100%"],"unit":["px","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":"custom"}} -->
<div id="gspb_container-id-gsbp-0e537274-534c" class="gspb_container gspb_container-gsbp-0e537274-534c wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/image {"id":"gsbp-e7be81d4-f154","scale":["cover"],"width":["custom",null,null,null],"widthUnit":["%","px","px","px"],"customWidth":[100,null,null,null],"originalWidth":765,"originalHeight":414,"position":{"positionType":["","","",""],"positions":{"values":{}},"Zindex":-99},"mediaurl":"https://www.signageindustries.com/new/wp-content/uploads/2022/01/smith-orthodontics-hp.webp","mediaid":1144,"alt":""} -->
<div id="gspb_image-id-gsbp-e7be81d4-f154" class="gspb_image gspb_image-id-gsbp-e7be81d4-f154 wp-block-greenshift-blocks-image"><img src="https://www.signageindustries.com/new/wp-content/uploads/2022/01/smith-orthodontics-hp.webp" data-src="" alt="" width="100" height="414"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-f1a9a496-8977","overlay":{"color":"#f7f5f5","hoverTime":0.5,"hoverOpacity":"","hoverEditor":"yes"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["0%"]}},"Zindex":9999},"csstransform":{"opacityHover":0.7,"opacity":0,"hoverdelay":0,"skewXHover":[null],"easingtransform":"ease","timetransform":"","time":"1.1","timebg":"","timeshadow":"","timeborder":"","timeopacity":"","timecolor":"","timefilter":"","easing":"ease-in-out"},"containerLink":"/architectural-signage/precision-cut-letters/","blockWidth":{"customWidth":{"value":["100%"],"unit":["px","px","px","px"]},"customHeight":{"value":["50%"],"unit":["px","px","px","px"]},"heightType":"custom","widthType":"custom"}} -->
<div id="gspb_container-id-gsbp-f1a9a496-8977" class="gspb_container gspb_container-gsbp-f1a9a496-8977 wp-block-greenshift-blocks-container"><div class="gspb_backgroundOverlay"></div><a class="gspb-containerlink" href="/architectural-signage/precision-cut-letters/" rel="noopener"></a><!-- wp:greenshift-blocks/heading {"id":"gsbp-0f435cff-4880","headingContent":"Precision Cut Letters","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[20]},"unit":["%","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dcontrast, #000000)","colorHover":"","hoverUnderline":false,"decoration":"underline","decorationHover":"underline","fontstyle":"italic","colorState":"Classic","size":["2.5rem"],"customweight":"bold","colorlinksHover":"","relativeHover":false},"csstransform":{"opacityHover":null},"enablehighlight":false,"highlightcolor":"","dynamictext":{"dynamicEnable":false}} -->
<h2 id="gspb_heading-id-gsbp-0f435cff-4880" class="gspb_heading gspb_heading-id-gsbp-0f435cff-4880 ">Precision Cut Letters</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-747f9e4e-d4c8"} -->
<div id="gspb_container-id-gsbp-747f9e4e-d4c8" class="gspb_container gspb_container-gsbp-747f9e4e-d4c8 wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/image {"id":"gsbp-08b06a60-3729","scale":["cover"],"width":["custom",null,null,null],"widthUnit":["%","px","px","px"],"customWidth":[100,null,null,null],"originalWidth":765,"originalHeight":414,"mediaurl":"https://www.signageindustries.com/new/wp-content/uploads/2022/01/smithfield-hp.webp","mediaid":1143,"alt":""} -->
<div id="gspb_image-id-gsbp-08b06a60-3729" class="gspb_image gspb_image-id-gsbp-08b06a60-3729 wp-block-greenshift-blocks-image"><img src="https://www.signageindustries.com/new/wp-content/uploads/2022/01/smithfield-hp.webp" data-src="" alt="" width="100" height="414"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-2d48a907-6fdd","overlay":{"color":"#f7f5f5"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["50%"]}},"Zindex":9999},"csstransform":{"opacity":0,"opacityHover":0.7,"easing":"ease-in-out","time":"1.1"},"containerLink":"/architectural-signage/fabricated-letters/halo-lit-letters/","blockWidth":{"customWidth":{"value":["100%"],"unit":["px","px","px","px"]},"customHeight":{"value":["50%"],"unit":["px","px","px","px"]},"heightType":"custom","widthType":"custom"}} -->
<div id="gspb_container-id-gsbp-2d48a907-6fdd" class="gspb_container gspb_container-gsbp-2d48a907-6fdd wp-block-greenshift-blocks-container"><div class="gspb_backgroundOverlay"></div><a class="gspb-containerlink" href="/architectural-signage/fabricated-letters/halo-lit-letters/" rel="noopener"></a><!-- wp:greenshift-blocks/heading {"id":"gsbp-73f7222d-ac96","headingContent":"Halo-Lit Letters","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[20]},"unit":["%","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dcontrast, #000000)","colorHover":"","hoverUnderline":false,"decoration":"underline","decorationHover":"underline","fontstyle":"italic","colorState":"Classic","size":["2.5rem"],"customweight":"bold","colorlinksHover":"#3531b8","relativeHover":false}} -->
<h2 id="gspb_heading-id-gsbp-73f7222d-ac96" class="gspb_heading gspb_heading-id-gsbp-73f7222d-ac96 ">Halo-Lit Letters</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-50da93e1-0359","order":[2],"flexbox":{"enable":false,"type":""},"blockWidth":{"customWidth":{"value":["1000%"],"unit":["px","px","px","px"]},"customHeight":{"value":[],"unit":["px","px","px","px"]},"widthType":""}} -->
<div id="gspb_container-id-gsbp-50da93e1-0359" class="gspb_container gspb_container-gsbp-50da93e1-0359 wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/container {"id":"gsbp-5982dda1-6112"} -->
<div id="gspb_container-id-gsbp-5982dda1-6112" class="gspb_container gspb_container-gsbp-5982dda1-6112 wp-block-greenshift-blocks-container"><!-- wp:greenshift-blocks/image {"id":"gsbp-e6cff658-79b9","scale":["cover"],"width":["custom",null,null,null],"widthUnit":["%","px","px","px"],"heightUnit":["%","px","px","px"],"height":["custom",null,null,null],"customWidth":[100,null,null,null],"customHeight":[100,null,null,null],"originalWidth":765,"originalHeight":828,"mediaurl":"https://www.signageindustries.com/new/wp-content/uploads/2022/01/vistas-hp.webp","mediaid":1145,"alt":"","ratio":""} -->
<div id="gspb_image-id-gsbp-e6cff658-79b9" class="gspb_image gspb_image-id-gsbp-e6cff658-79b9 wp-block-greenshift-blocks-image"><img src="https://www.signageindustries.com/new/wp-content/uploads/2022/01/vistas-hp.webp" data-src="" alt="" width="100" height="100"/></div>
<!-- /wp:greenshift-blocks/image --></div>
<!-- /wp:greenshift-blocks/container -->

<!-- wp:greenshift-blocks/container {"id":"gsbp-16398245-c526","background":{"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dbase, #ffffff)"},"position":{"positionType":["absolute","","",""],"positions":{"values":{"top":["0%"],"bottom":["0%"],"left":["0%"],"right":["0%"]}}},"csstransform":{"opacity":0,"opacityHover":0.7,"time":"1.1","easing":"ease-in-out"},"containerLink":"/architectural-signage/wall-signs/"} -->
<div id="gspb_container-id-gsbp-16398245-c526" class="gspb_container gspb_container-gsbp-16398245-c526 wp-block-greenshift-blocks-container"><a class="gspb-containerlink" href="/architectural-signage/wall-signs/" rel="noopener"></a><!-- wp:greenshift-blocks/heading {"id":"gsbp-5b64272e-71e7","headingContent":"Wall Signs","spacing":{"margin":{"values":{},"unit":["px","px","px","px"],"locked":false},"padding":{"values":{"top":[45]},"unit":["%","px","px","px"],"locked":false}},"typography":{"alignment":["center"],"textShadow":{},"color":"var(\u002d\u002dwp\u002d\u002dpreset\u002d\u002dcolor\u002d\u002dcontrast, #000000)","colorHover":"","hoverUnderline":false,"decoration":"underline","decorationHover":"underline","fontstyle":"italic","colorState":"Classic","size":["2.5rem"],"customweight":"bold","colorlinksHover":"#3531b8","relativeHover":false}} -->
<h2 id="gspb_heading-id-gsbp-5b64272e-71e7" class="gspb_heading gspb_heading-id-gsbp-5b64272e-71e7 ">Wall Signs</h2>
<!-- /wp:greenshift-blocks/heading --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container --></div>
<!-- /wp:greenshift-blocks/container -->

We added template for different kind of hovered text

You can copy template