Xidipity

Knowledge Base

image transitions
Guides: Image Transitions
Xidipity WordPress Theme Knowledge Base Guide Content Header Image

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 mobile devices.

 

Appearance

nudge
class: trn:nudge!hover

Xidipity Knowledge Base Image Transitions Content Image

 

grow
class: trn:grow!hover

Xidipity Knowledge Base Image Transitions Content Image

 

shrink
class: trn:shrink!hover

Xidipity Knowledge Base Image Transitions Content Image

 

grow shadow
class: trn:grow-shadow!hover

Xidipity Knowledge Base Image Transitions Content Image

 

greyscale
class: trn:greyscale!hover

Xidipity Knowledge Base Image Transitions Content Image

 

focalpoint
class: trn:focalpoint!hover

Xidipity Knowledge Base Image Transitions Content Image

 

glow
class: trn:glow!hover

Xidipity Knowledge Base Image Transitions Content Image

 

drop shadow
class: trn:drop-shadow!hover

Xidipity Knowledge Base Image Transitions Content Image

Installation

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

These wpX classes are live in the editor and can be added to images as desired.


  • Since: v1.0.0

 

May 20, 2022