Xidipity

Knowledge Base

image transitions
Guides: Image Transitions

Image transitions are often used to bring attention to the image the cursor is above. As transitions are triggered by the hover event, they are less useful on devices which use a finger for navigation. The transition occurs on keypress with these devices. To add a transition to an image, perform the following steps.

 
  1. copy the class to the clipboard
  2. click the desired image to select
  3. select (​​) to edit
  4. under advanced options paste clipboard to class option
  5. click the Update button

 

appearance

 
nudge
class: trn:nudge!hover

Xidipity post/page titled "Image Effects" content image

 

grow
class: trn:grow!hover

Xidipity post/page titled "Image Effects" content image

 

grow shadow
class: trn:grow-shadow!hover

Xidipity post/page titled "Image Effects" content image

 

greyscale
class: trn:greyscale!hover

Xidipity post/page titled "Image Effects" content image

 

focalpoint
class: trn:focalpoint!hover

Xidipity post/page titled "Image Effects" content image

 

shadow
class: trn:shadow!hover

Xidipity post/page titled "Image Effects" content image

 

glow
class: trn:glow!hover

Xidipity post/page titled "Image Effects" content image

 

drop shadow
class: trn:drop-shadow!hover

Xidipity post/page titled "Image Effects" content image

April 10, 2021