Table with image hover

  • ufopsi

    (@ufopsi)


    7 years, 2 months ago

    Hi there, we are building a new website with Jupiter X and there is a feature we would love to reproduce. If you check this page:

    It is a real estate site. There is a table listing apartments, and a gif image displaying the building. When hovering over a table row, the image is replaced by another one, showing the location of that apartment. The table uses data-image-class=”object-3″. When hovering over a row, default image changes from class=”project” to class=”project hide” and the image that’s “linked” to the table row changes from class=”object object-3″ to class=”object object-3 show”. Do you have any idea how to build this with Jupiter X / Elementor?

    Thanks.
    Kind regards. M

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)
  • Joy

    (@joyously)

    7 years, 2 months ago

    What is Jupiter X? Maybe you should ask in their support forum.
    You should also consider that touch screen devices do not have hover, so a lot of your audience would not see the images.

    Moderator bcworkz

    (@bcworkz)

    7 years, 2 months ago

    The effect is not something you can implement with typical page builders. It’s a small JavaScript or jQuery development project in itself. All the images take up the same space, except all but one are hidden by default. There are a series of event listeners, one for each table row. When the mouseover event fires for a particular row, script hides all the images by changing their class attributes, then causes an appropriate image to show by adding a class attribute to just that one image.

    There should also be a click event listener so mobile users can tap to see updated images since hovering isn’t available on mobile devices. There’s a small chance that there is a plugin available that implements this effect with a little setup, but I’m not aware of any myself.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Table with image hover’ is closed to new replies.