How to create image hover interactions in a list
ABOUT
Looking to make your site more interactive? Learn how to add images that appear when you hover on your Wix site.
SUITABLE FOR
Editor X
PROJECTS USED
Chapter 01: 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.
Chapter 02: 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.
Chapter 03: 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.
