css class suffix in Page Builder element

Doesn’t anyone know how this field works? I can’t find any info online…

add a unique class name for example: img-style1

now add css code in your style.css file

.img-style1{
width: 50px;
border :1px solid #eee;
padding: 5px;
}

thank you so much for your answer Nomi. However I can’t get it to work. Could there be anything overriding this css? I used the exact example you gave me but no change to the image. I’m using the vantage theme.

Hi Brekick,

Please provide your site url or describe about how you want to style your image so I can assist you better.

I’m also looking for some info on this feature.

I’m attempting to create a hover effect for images on my static home page and have been given some CSS to add that works for all images when added to the child theme, but I’m now trying to create a class so that I may pick and choose images for application.

I attempted to add the same CSS to each individual image via the page builder, but also had no luck.

This is the code:

a img{
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

a img:hover{
    opacity:0.6;
    filter:alpha(opacity=60); /* For IE8 and earlier */
}

This is my site so far: getsrsly.com

Thanks for any help!

Hi,

I see that all images in your home page work as it should. Could you please create a sample page which contains the problem and let me know so I can assist you better ?

Yes they are working now, as I added the code listed above to the CSS of my child theme. It therefore applies to all hyeperlinked images. This includes my logo, however, which I was not wanting to fade. It’s not a huge deal (and I might figure out how to exclude my logo, since it would be easier than telling all others to fade, one by one) but I just thought I’d post to see whether it’s my CSS or the feature of the plugin that’s not working correctly.

Thanks for the reply – I’ll be happy to help test anything.

Hi saucer78,

So I think that the solution is to add 1 more CSS rule to exclude this effect in your logo as below :

#header a img:hover {
     opacity: 1;
}

That snippet worked perfectly, thank you!

Hi,

Glad to hear that you’re satisfied with the result.

If you still have any question or need further assistant, don’t hesitate to let us know.

Hi saucer78,

If you don’t mind, I would like to ask you a favor. Since your opinion matters to us and to other customers, we’d be really appreciative if you could take a few moments to review your experience.

In addition, we’re running a promotion campaign for IG Page Builder. We will offer our special give-away program for 100 lucky participants who register (it’s free) from 12th to 16th May (EST). If you love IG Page Builder, you won’t want to miss it.

Best regards,

Adam.

Happy to help, Adam. I’ve been meaning to give a review for your plugin and will do so right now so I won’t forget again. The only way I know of is through its page here on www.remarpro.com, but if there are any other sites you could benefit from some input, I’d be happy to chip in.

Thank you very much !

Cheers.