How to create image hover interactions in a list
PROJECTS USED
TAGS
SUITABLE FOR
Editor X
ABOUT
Looking to make your site more interactive? Learn how to add images that appear when you hover on your Wix site.
Layout
01. Add a repeater with one list item
02. Stretch the repeater to full width
03. Add a text element and adjust the style
04. Set the item height to "auto"
05. Add a default and hover image to the item
06. Add two repeater items
07. Style the item and fix the repeater's position
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Database
01. Add a collection to the site
02. Add "title" and "hover image" fields
03. Add content in the fields
04. Publish the site
05. Add a dataset to the page
06. Connect repeater elements to the dataset
Note: The default image isn't connected to the dataset
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
Interactions
01. Add an effect to a repeater item
02. Default image: 0% on hover, 100% on initial
03. Hover image: 100% on hover, 0% on initial
04. Set timing on "initial" and "hover" states
05. Add a trigger to the effect
Add paragraph text. Click “Edit Text” to customize this theme across your site. You can update and reuse text themes.
