Docs

[onefoursix]

re: http://laraboothairdressing.co.uk/our-team/

is there a way to have another image appear on hover when hovering over the team profiles please?

[Paul R]

Hi,

Thanks for writing in!

Yes that’s possible.

Kindly do the following.

1. Add background to each blockgrid item. This will be the one visible on hover.
As much as possible make your image the same size as the profile image.

To add background, add this code in the style field of your blockgrid element.

background:url(image.jpg) top center no-repeat;

Change image.jpg with the corresponding image to each profiles
2. Add class my-profiles in the class field of each blockgrid item.

http://screencast.com/t/N4316JbZC

3. Add this under Custom > CSS in the Customizer.

.my-profiles {
   background-size:contain;
}

.my-profiles:hover img {
     opacity:0;
}

Hope that helps.

[onefoursix]

It is not showing correctly. The background image is too long despite it being exactly the same dimensions as the top image. Can you let us know how we resolve this please.

[Thai]

Hi There,

Please update the previous CSS a bit:

.my-profiles {
   background-size: contain !important;
}
.my-profiles:hover img {
     opacity:0;
}

Hope it helps 🙂

[Author]

Posts