Docs

[glenngtr]

Hi all,

I have a question. I would like to change the colour on hove for some SVG logo’s. Initially they are grey but when the mouse hovers over them I want them to go full colour.

I have tried the method in the following topic (https://community.theme.co/forums/topic/image-hover-3/#post-161846) but with no luck. I can see a transition happening, but on hover I only see a faint red glow instead of a Black and Red logo.

I have a full colour SVG file vanwijnen.svg and a grey version grijsVan-Wijnen.svg in the medialibrary

[glenngtr]

This reply has been marked as private.

[glenngtr]

I have two other questions:

1. How can I make a revolution slider in a page (container) full width? It now fits to the content area where I want the slider to be full width.

2. There are two columns that have a lot of content (‘tenderfase’ en ‘realisatiefase’), I would like to break it down with a ‘read more’ link, so if you would click it, the content would collaps. How can I do that?

[Paul R]

Hi,

I went ahead and fix the first logo.

Kindly do the same for the other.

Add a unique class and add custom css targeting that class.

Hope that helps.

[Paul R]

Hi,

1. You may refer to this link – https://community.theme.co/kb/sliders/

2. You may use accordion element instead – http://demo.theme.co/integrity-1/shortcodes/accordion/

Hope that helps.

[glenngtr]

Hi Paul,

Unfortunately the logo hover did not work. It’s getting a light gray hover that it already did previously, so I can’t make it work for the other logo’s unfortunately. Please see video clip in attachment.

[glenngtr]

Hi Paul, the article you suggested talks about sliders above or under the masthead, but that is not what I need. I need a slider in the middle of the page to be full width. Can you help me with that? I don’t want to use a background img for a section because it gives me less responsive control.

[Rad]

Hi there,

The actual SVG files are gray

http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/grijsVan-Wijnen.svg
http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/grijsBouwhuysch.svg
http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/grijsDuraVermeer.svg
http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/grijsBAM.svg

You can only change its color by directly editing those files, you can’t colorized them through CSS.

About the slider, edit your slider settings and set it to full-width. Or, inspect your section row and toggled off the column container.

Thanks!

[glenngtr]

Hi Rad,

1. Disabling the column container did the trick for the full width slider, thanks!

2. As mentioned in the first post, there already was a full colour svg to experiment.

http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/vanwijnen.svg

for you reference I added the other full colour svgs as well.

http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/duravermeer.svg
http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/bouwhuysch.svg
http://www.bgrip-contractmanagement.nl/wp-content/uploads/2017/03/bam.svg

So how do put them in greyscale or a solid color fill (preferable), and then have the full colour logo on hover?

Thanks.

Best regards

[Rad]

Hi there,

You’ll have to use CSS filter, but your SVG should be in colored first. Please update your logo to colored ones (correct SVG URL) then add this CSS to Admin > Appearance > Customizer > Custom > CSS

  .grayscale-effect {
      -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    opacity: 0.5;
  }
  .grayscale-effect:hover {
        -webkit-filter: none;
    filter: none;
    opacity: 1;
  }

Then add grayscale-effect to your image’s Class attribute. Example,

[image class="grayscale-effect"]

Thanks!

[glenngtr]

Worked like a charm. Thanks!

[Christopher]

You are welcome.

[glenngtr]

Last question (I hope :-)) for some reason the svgs scale differently when displayed in mobile layout. Is there a way to fix it so it aligns with the upper to logos? (see attachment)

[Lely]

Hi There,

SVG proportion/size are different. For mobile to make it the same size and align properly, please try adding this custom CSS:

@media (max-width: 480px){
.x-block-grid.four-up>li>a>img {
    max-width: 217px;
}
}

Hope this helps.

[Author]

Posts