Image swap on hover using custom image field

This thread is resolved. Here is a description of the problem and solution.

Problem:
Using custom image fields, the client wants an image swap effect when hovering over the main image.

Solution:
It is straightforward to do it with two separate images just using CSS.

Output the two images inside a wrapper div with some specific class you can target, and then add some custom CSS.

The solution would look something like this:

// the markup
<div class="hover-effect">
  [types field="first-image"][/types]
  [types field="hover-image"][/types]
</div>
 
// custom CSS
.hover-effect img:last-child {
  display:none
}
.hover-effect:hover img:first-child {
  display:none
}
.hover-effect:hover img:last-child {
  display:inline-block
}

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun	Mon	Tue	Wed	Thu	Fri	Sat
-	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	7:00 – 14:00	-
-	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	15:00 – 16:00	-

Supporter timezone: Europe/London (GMT+00:00)

Tagged: Types plugin

This topic contains 2 replies, has 2 voices.

Last updated by stuart 6 years, 5 months ago.

Assisted by: Nigel.

Author

Posts

June 14, 2018 at 1:19 am #913234

stuart

I have a profile page like this of people who work at the company:
hidden link

If you hover over the employees you get an image change... and I would like to replicate this.

I have two custom fields - one with the 1st image and one with the 2nd image Id like it to change too - is this possible?

here is a thread from years ago: https://toolset.com/forums/topic/image-swap-on-hover/

Do you have any idea how this would be achieved?

thanks

June 14, 2018 at 8:02 am #913350

Nigel

Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Hi Stuart

The way Lyft do it is that both pictures are combined in a single image file and the visible part shifts on hover.

It is straightforward to do it with two separate images, though, just using CSS.

Output the two images inside a wrapper div with some specific class you can target, and then add some custom CSS.

Your solution would look something like this:

// markup
<div class="hover-effect">
  [types field="first-image"][/types]
  [types field="hover-image"][/types]
</div>

// custom CSS
.hover-effect img:last-child {
  display:none
}
.hover-effect:hover img:first-child {
  display:none
}
.hover-effect:hover img:last-child {
  display:inline-block
}

June 18, 2018 at 9:49 am #914660

stuart

Thanks Nigel - Awesome help as ever! Worked perfectly