Image overlay bg color - Support | Kriesi.at

Tagged: overlay

Viewing 16 posts - 1 through 16 (of 16 total)

Author

Posts
September 27, 2018 at 3:34 pm #1015334
AWZ
Participant
How is the preference for the transparent background color of that. Found the hover color in backend but not a possibility to have a transparent color. No overlay color but a hover color, thats the goal.
```
[av_button_big label='' description_pos='below' link='manually,http://.../' link_target='_self' icon_select='yes-left-icon' icon_hover='aviaTBaviaTBicon_hover' icon='ue82d' font='entypo-fontello' custom_font='#ffffff' color='' custom_bg='#444444' color_hover='theme-color-subtle' custom_bg_hover='#444444' custom_class='' av_uid='av-crell4']

[/av_button_big]
```
September 27, 2018 at 4:38 pm #1015375

Jordan Shannon
Inactive Moderator

Hey AWZ,

Please add more context to the question. Perhaps a link to the site/page in question so we can see what you need exactly.

Best regards,
Jordan Shannon

September 28, 2018 at 10:25 am #1015675

AWZ
Participant

Hey Jordan,

roger. You find the example you need. This overlay image link to a pdf. I want to change two things
– the top padding and
– the grey overlay to totally transparent
The hover is ok. In the backend you can edit this thing but not as wished.

Thanks Sven

September 29, 2018 at 10:14 am #1016012
Nikko
Inactive Moderator
Hi AWZ,

Thanks for giving us the link.
As for the grey overlay, try adding this css code in Quick CSS (located in Enfold > General Styling):
```
#top .main_color .avia-button .image-overlay {
    background: transparent !important;
}
```
As for the top padding, are you referring on top of the image? since I could see there’s a button on top of it.
Best regards,
Nikko
October 1, 2018 at 9:25 am #1016479

AWZ
Participant

Thanks Nikko,

I´ve tested it. It seems that it works but the image is still wishy washy (not saturated) and I don´t know why. Like there is still a layer above…
Correct. There is a text button on top. Do you have the right selector for that. Can´t find it out – even with inspector.

Thanks Sven

October 1, 2018 at 9:54 am #1016496

Milan
Participant

Hello AWZ, try to add value directly (for example)
rgba(255, 255, 255, 0)
directly instead of (for example)
#FFFFFF
On my site it works :)
Milan

October 1, 2018 at 9:59 am #1016501

Rikard
Keymaster

Hi,

Thanks for sharing @Milan, much appreciated. Did you try that out @AWZ?

Best regards,
Rikard

October 1, 2018 at 10:22 am #1016525
AWZ
Participant
@Milan

direct in backend preference or as CSS?
```
#top .main_color .avia-button .image-overlay {
    background-color: rgba(255, 255, 255, 0);
background: transparent !important;
}
```
Thanks
October 1, 2018 at 10:32 am #1016533
Milan
Participant
I mean in beckend, code with no spaces.
rgba(255,255,255,0)
or
rgba(255,255,255,0.01)

See on this image:
- This reply was modified 6 years, 1 month ago by Milan. Reason: grammar, code
October 1, 2018 at 11:42 am #1016564
AWZ
Participant
Cool & thank you Milan!
This is a good hint and it works for the colors in the enfold backend. But in my case this is not the solution, because you set the menu links and I have a problem with linked image overlays. I have a german version. Maybe the translation doesn´t fit. You find it here:
– extended styling
– various
– linked image overlay

@enfold: This is a method to set transparent colors works, but the preview doesn´t show the color correctly in the backend. This is a display issue. Maybe you insert in a upcoming enfold theme update the possibility to set transparent colors correctly. I see only hexa and hsb.

Conclusion
I want to get rid of two things:
- image overlay grey color (NOT hover)
- button obove (for a equal padding)
Screenshots
1) Backend

2) Testsettings. You can only edit the hover color, the symbol color and the symbol bg

3) Result. Left is hover. Right is the overlay, that I want get rid of.

BG Sven
- This reply was modified 6 years, 1 month ago by AWZ. Reason: Screenshots doesn´t display
October 1, 2018 at 11:51 am #1016573
AWZ
Participant
@Rikard Is there a restriction about images? Screenshots doesn´t display…
- This reply was modified 6 years, 1 month ago by AWZ.
October 1, 2018 at 12:01 pm #1016577

Milan
Participant

It should work, I tested it also for image overlay:

But as you said, you have overlay over images when they are not hovered? Or perhaps I should stay silent here not to make it messy because some thing are not clear to me :)

Screenshot/images should be placed somewhere online, then post a link here.

October 1, 2018 at 12:33 pm #1016597

AWZ
Participant

Displaying of the screenshots doesn´t work. Here are the links

1) Backend
BACKEND SELECTION
2) Testsettings. You can only edit the hover color, the symbol color and the symbol bg
TESTSETTINGS
3) Result. Left is the hover image with the colors you can edit in the backend. Right is the overlay color and the symbol on top, that I want get rid of.
RESULT

October 3, 2018 at 7:04 am #1017369
Ismael
Moderator
Hi,

The images look a little faded because the opacity of the button description is set to 0.7 by default. You should set it to 1.
```
#top .avia-button-fullwidth .av-button-description {
    opacity: 1;
}
```
Best regards,
Ismael
October 4, 2018 at 8:29 am #1017754
AWZ
Participant
Hi Ismael,

thanks. Very interesting, it works. This is a setting from enfold.

NOT SOLVED
I want to get rid of the button obove for an equal padding of the background color of the linked overlay image.

SOLUTION FOR OPACITY / COLOR (conclusion of the threads)
Opacity of the image
```
#top .main_color .avia-button .image-overlay {
    background: transparent !important;
}
```
Background Color transparent: two Versions
```
.avia-button {background-color: rgba(255, 255, 255, 0);}

#top .main_color .avia-button .image-overlay {
    background: transparent !important;
}
```
Best regards Sven
October 6, 2018 at 4:49 pm #1018522
Nikko
Inactive Moderator
Hi Sven,

Can you try adding this css code:
```
.page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth span.avia_button_icon, 
.page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth span.avia_iconbox_title {
    display: none;
}

.page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth .av-button-description p {
    margin-top: 0;
}

.page-id-4336 #after_full_slider_1 .avia-button.avia-button-fullwidth {
    background: transparent;
}
```
Best regards,
Nikko
Author

Posts

Viewing 16 posts - 1 through 16 (of 16 total)

You must be logged in to reply to this topic.