iStack
iStack
Layer two images with captions, text or other Stacks
Layer two images with captions, text or other Stacks
RapidWeaver Stacks add-on info:
The iStack is a Stack I have wanted to create for a very long time. So I started one morning when I woke up too early and spend the next week to finish it. And here it is!
Positioning two images with text and having them resize accordingly on smaller screens isn't quite as easy as it sounds! That's why many WebDesigners create their compositions / banners / adds with both images and text in Photoshop.
I proudly present to your the iStack. One of it's kind and the most advanced and feature rich Image Layer Stack around…
How to:
Add a back and front image in the iStacks settings, enable captions, enable dropzone and use the iStack's advanced settings to position all the elements. You can even adjust settings with your own breakpoint value when viewed on smaller screens (smartphones). And of course there's custom css input so you can add own code if you need and know how to.
Special features:
Add Image Captions in any of the four corners. Add a text Stack and position it in any of the four corners… or any other Stack for that matter.
Support for mouse over: hue, grayscale, resize. Support for both DropImages and WareHoused images (server hotested images).
And for the nerds – the iStack uses html images, not css background image… this means you'll get to enter an alt name for your image, both back and front image.
What's in the package:
I've created a special iStack + GoGrid bundle – if you don't already own the GoGrid. The GoGrid is THE most advanced grid stack for RapidWeaver. You can see it in action below. The iStack + GoGrid will make it easy to create a catalogue page like the example below.
Free graphics: Red Round Graphic Png files (some used below). Free to use in any project. Download here.
Keywords:
RapidWeaver, stacks, responsive, image, text, captions, layers, adds, banners, headers.
The iStack is a Stack I have wanted to create for a very long time. So I started one morning when I woke up too early and spend the next week to finish it. And here it is!
Positioning two images with text and having them resize accordingly on smaller screens isn't quite as easy as it sounds! That's why many WebDesigners create their compositions / banners / adds with both images and text in Photoshop.
I proudly present to your the iStack. One of it's kind and the most advanced and feature rich Image Layer Stack around…
How to:
Add a back and front image in the iStacks settings, enable captions, enable dropzone and use the iStack's advanced settings to position all the elements. You can even adjust settings with your own breakpoint value when viewed on smaller screens (smartphones). And of course there's custom css input so you can add own code if you need and know how to.
Special features:
Add Image Captions in any of the four corners. Add a text Stack and position it in any of the four corners… or any other Stack for that matter.
Support for mouse over: hue, grayscale, resize. Support for both DropImages and WareHoused images (server hotested images).
And for the nerds – the iStack uses html images, not css background image… this means you'll get to enter an alt name for your image, both back and front image.
What's in the package:
I've created a special iStack + GoGrid bundle – if you don't already own the GoGrid. The GoGrid is THE most advanced grid stack for RapidWeaver. You can see it in action below. The iStack + GoGrid will make it easy to create a catalogue page like the example below.
Free graphics: Red Round Graphic Png files (some used below). Free to use in any project. Download here.
Keywords:
RapidWeaver, stacks, responsive, image, text, captions, layers, adds, banners, headers.
Stacks settings:
