Image swap on hover using custom image field

Dieser Thread wurde gelöst. Hier ist eine Beschreibung des Problems und der Lösung.

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 vor 6 Jahren, 5 Monaten. 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.

Heute stehen keine Supporter zur Arbeit im Werkzeugsatz-Forum zur Verfügung. Sie können gern Tickets erstellen, die wir bearbeiten werden, sobald wir online sind. Vielen Dank für Ihr Verständnis.

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)

Tags: Types plugin

Dieses Thema enthält 2 Antworten, hat 2 Stimmen.

Zuletzt aktualisiert von stuart vor 6 Jahren, 5 Monaten.

Assistiert von: Nigel.

Author

Artikel

Juni 14, 2018 at 1:19 am #913234

stuart

I have a profile page like this of people who work at the company:
versteckter 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

Juni 14, 2018 at 8:02 am #913350

Nigel

Supporter

Sprachen: Englisch (English ) Spanisch (Español )

Zeitzone: 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
}

Juni 18, 2018 at 9:49 am #914660

stuart

Thanks Nigel - Awesome help as ever! Worked perfectly