[Support request] Can you help me reproduce this effect with GB?

[Nicolas]

Hello,

In the private filed info, I shared:

URL1 : on his is a site you can see the visual effect applied on the images that I want to reproduce.

URL2: This is my modest attempt at reproducing the effect. Please see the TEST image below the heading “2. Tapis pour lutter et s’entrainer chez soi”

Please note that I CANNOT have real images on my sites. I’m using Custom code like this and this GB structure too. As you cann see I used a Large Heading to get the icon, but it displays below the image, not over it.

Thank you.

[David]

Hi there,

you can absolute position your hover-show element over your hover-box and disable its pointer events so the link still works:

.hover-box {
    position: relative;
}
.hover-show {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
}

[Nicolas]

Hi David,

I added the coded snippet to the CSS but I see no change.

Thanks

[David]

The CSS is working, the icon that appears on hover now overlays the image.
You need to add your own icon if you want it to match the example site.

[Nicolas]

Hello,

I’m sorry, but I still do not understand.

Look, my icon is still not hovering the image.

[David]

It is working in my browser:

https://www.screencast.com/t/18Lm9Dxu

[Nicolas]

My bad. Cache issue on my side this time. Sorry about that.

3 things:
1 – How can I download the same “arrow in a circle” icon as on the URL shared in the PI field. I tried looking at the source code but was not able to get it.

2 – How can I make the icon transparent?

3 – If you look at my page right now, the icon is affected by the opacity of the image. How to mane them independent so that I can keep the icon in full color with full opacity while decreasing even more the opacity of the image to match the effect of the demo URL shared.

4 – Last but not list, how can I have that effect on all my images? Should I create a reusable block to be used each time I insert a new image in a blog post?

[David]

1. Its not an image/icon its a font. they use this library:
https://fontello.com

you can search for share to find something similar.

2. with GB Pro add an Effect > Opacity

3. You have an Opacify Effect on that Container, instead of setting the Target to Self set the Target to Custom Selector and in the field provided add img this will then apply the opacity change to just the image.

4. If you do that, and in the future you want to change it, then you would need to edit every image on your site that you added it to. Do you really want to do that ?

[Nicolas]

1. Thanks. But I am happy with the icon I now have. Is there any reason why I should switch to the font you suggest?.

2. I did it like this but the icon does not become transparent.

3. Wow, this is so powerful. You guys rock. Still I have an issue: In doing what you said, the effect is now triggered even when you put your mouse cursor on the white area on the right and left hand side of the actual image. When the effect was set to Self, id did not happen.

4. No 😉 So, what’s the best option? Is there a way to “automate” this or create a “template” for this? As of today, I’m duplicating my blocks and I change the Custom Html code to get a new image every time I need it.

This is the type of “double transparency” I would like to get for the image and icon.

[David]

Sometimes it is better to have a pure CSS solution.
For example:

1. add a Container Block with the Class of: hover-box
2. inside that Container Block add your HTML code for the link with the image
3. Add this CSS to your site:

/* set the link to a relative inline-block for size and overlay position */
.hover-box a {
    display: inline-block;
    position: relative;
}
/* add psudeo elements to the link and overlay postion them and make them opacity 0 */
.hover-box a:before,
.hover-box a:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    transition: all 0.15s ease-in;
}
/* add the SVG as as URL encode for the before pseudo */
.hover-box a:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 56' height='80' width='80' fill='%23fff'%3E%3Cpath d='M28 51.9A24.1 24.1 0 0 0 51.9 28 24.1 24.1 0 0 0 27.99 4.1 24.05 24.05 0 0 0 4.09 28 24.08 24.08 0 0 0 28 51.9Zm1.87-14.1a1.4 1.4 0 0 1-1.45-1.46v-4.82h-.37c-4.9 0-8 1.21-10.18 5.34-.42.8-1 .94-1.54.94-.66 0-1.3-.59-1.3-1.67 0-9.35 3.97-15.1 13.02-15.1h.37v-4.8c0-.82.61-1.52 1.48-1.52.63 0 1.03.28 1.69.9l9.96 9.3c.49.44.63.91.63 1.36 0 .42-.16.89-.63 1.33l-9.96 9.38c-.59.54-1.08.82-1.72.82Z'%3E%3C/path%3E%3C/svg%3E");
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 1;
    transform: rotate(-20deg) scale(0.8);
}
/* add a background color to the after pseudo for an overlay */
.hover-box a:after {
    background-color: #000;
}
/* transform and set opacity of psudos on hover */
.hover-box a:hover:before {
    opacity: 0.8;
    transform: rotate(0) scale(1);
}
.hover-box a:hover:after {
    opacity: 0.3;
}

This adds an colored background overlay to the image and the icon.
Both of which have an Opacity of 0 until the link is hovered over.

This method means you can add remove update it in the future without having to edit your pages at all

[Author]

Posts