Docs

[onefoursix]

re: http://146test2.co.uk/beerg/about/

I would like an image to come up as you roll over the team images at the bottom of the page, similar to what is happening on – http://laraboothairdressing.co.uk/our-team

Can you advise please?

[Friech]

Hi There,

Thanks for writing in! Apply the alternate image of the member as a background of your block grid item. You can add something like this on the STYLE field of your block grid item.

background: url(IMAGE URL HERE) top center no-repeat;

And apply a class alternate-photo on your block grid item. Then add this on your Custom CSS on Customizer.

.alternate-photo:hover img {
    opacity: 0;
}

What will happen is, when you hover-over the initial image it will became transparent, resulting for the alternative image become visible.

Hope it helps, Cheers!

[onefoursix]

the background image is not working correctly. Can you check please?

[onefoursix]

…also the George one isnt working at all?

[Paul R]

Hi,

Please add this code in your style field.

    background-size: contain;

So your code will look something like this.

    background: url(http://146test2.co.uk/beerg/wp-content/uploads/2016/09/matt2.png) top center no-repeat;background-size: contain;

With regards to George, I can see you have added alternate-photo in the id field field instead of the class field. Please add it in the class field.

Hope that helps.

[Author]

Posts