image

Image stack with customizable hover effects

Stacks Image 113882

Version: 1.0.1 - RW8/Classic & Stacks
Browser: Chrome, Safari, Opera, Brave, Firefox, Edge.

Picture makes your Images with captions Awesome!

This Image stack offers the ultimate solution to style customization on desktop and mobile.
Picture is a smart image stack with customizable hover effects.The effects are rendered in pure CSS3 to increase performances. You can customize everything according to your needs. Just look at the demos
 Drop Images Here 

Stacks Image 114959
Stacks Image 114961
Stacks Image 114953
Stacks Image 114956
Stacks Image 114955
Enter the name for this tabbed section:

STACK INFO

 image

Try me

Customize overlay style and animation
Stacks Image 114920
Change animation speed and behavior
Stacks Image 114916

LINK / HOVER options:


You can activate each option selectively.
Image Box: Scale Down
Image: Scale Up & animated Shadow
Overlay: Fade In - Out with custom setting
Image Text: Fade In-Out, Scale In-Out, Slide
      Responsive Options

You can edit all styles on mobile
Image Borders, rounded corners and shadow
Overlay opacity (from 0>100% or any other value)
Image and text alignment
Font size, colours and padding

Key Features


Add link to stack with hover effects
Set Max Width for tablet and phone.
Customize Borders and Shadow
Overlay with gradient and images
Option to add animated Shine
Change all styles and alignment on mobile
Change animation speed and behavior
Titles with custom font & colours
Enter the name for this tabbed section: GENERAL SETTING

Picture Options

Edit Mode
Stacks Image 114809
Preview the image with original aspect ratio
Template setting
Stacks Image 114819
Responsive setting
   
Stacks Image 114827
Image Setting
    +     +  
Add BG to the stack.
- Drag image from resources panel or disk
- Load image from URL
Stacks Image 114837
Title: Colours & Style
 
Stacks Image 114846
Add Link to Stack
 
Stacks Image 114854
Mobile Breakpoint
Stacks Image 114862
   
  Responsive Options


You can edit all styles on mobile
Image Borders, rounded corners and shadow
Overlay opacity (from 0>100% or any other value)
Image and text alignment
Font size, colours and padding
Background Overlay
+
Stacks Image 114871
Title Option
Stacks Image 114799
Enter the name for this tabbed section: FAQ

FAQ

Smooth Animation

How to increase performances?



Choose the best combination between filters, filling method and animation.
You should try the animation in more than one browser, the stack deliver "cross platform web fonts" and the result is quite identical in all browsers.

The features requiring more resources are:

- CSS filters over the BG like Blur (or you can use 2 images)

- Further css filters applied to the stack with nested stack.

Load images

How to load a Stacks4 "site image" in this stack?


- Publish the project ( to upload all "site images").
- In RW copy the URL from the Thumbnail in Resources panel.
- In the Stack Paste the image path into the URL field.
Stacks Image 114899

RW: Resources panel / site image

Stacks Image 114879

Stack: external "URL image"

PICTURE STACK
RW8/Classic & Stacks4/5

Changelog


Cart