From our sponsor: Chromatic - Visual testing for Storybook, Playwright & Cypress. Catch UI bugs before your users do.
Today we’d like to share some inspiration for simple stack effects with you. You have certainly seen these kind of effects, mostly used in image galleries, but also on single items on a page: one item is shown initially and then, with some trigger, more items are revealed, normally as decoration. One can imagine a couple of triggers for these effects: item hover, on load, on scroll and on click effects. When using some subtle, but creative moves, we can make some interesting effects that elevate a static design.
Note that for some of the effects we use perspective and 3D transforms so they will only work in modern browsers.
The beautiful illustrations are by Isaac Montemayor. Check out his Dribbble profile, he’s an awesome illustrator.
The markup is the following:
<figure class="stack stack-sidegrid"> <img src="img/1.png" alt="img01"/> <img src="img/3.png" alt="img03"/> <img src="img/4.png" alt="img04"/> <img src="img/2.png" alt="img02"/> </figure>
We use a figure with three or four images.
All images, except for the last one, will be absolute:
.stack { margin: 20px auto; width: 400px; padding: 0; position: relative; max-width: 100%; } .stack img { max-width: 100%; position: absolute; top: 0; left: 0; transition: all 0.3s; } .stack img:last-child { position: relative; }
Setting one of the images to position relative will give our parent figure a height.
Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.
An example effect is the following:
/* Bouncy Grid */ .stack-bouncygrid.active img { transform: scale(0.48); } .stack-bouncygrid.active img:nth-child(4) { transform-origin: 0 0; } .stack-bouncygrid.active img:nth-child(3) { transform-origin: 100% 0; } .stack-bouncygrid.active img:nth-child(2) { transform-origin: 0 100%; } .stack-bouncygrid.active img:first-child { transform-origin: 100% 100%; }
This effect moves the items to the corners and scales them down.
Note that for some of the examples (grids), we simply set the width of the images to something smaller. You’d of course use a accordingly sized image.
I hope you enjoy these little effects and find them inspiring!
Great work as always. Thanks, Manoela.
Love all the grid effects and the peek-a-boo one! ^^
yeah …. yeah … ^_^’
This is so great! it is so clean and cool 😀
Nice and simple! Love it!
– Andor
amazing as always 🙂
loved the “Peek-a-boo” effect.
Loved the effects. Thumbs up to the “peek-a-boo” and leaflet. 🙂
Very nice effects, thanks! I’ve been playing with some other events like mouseover and mouseout and it seems pretty inspiring. Would be great to have links on each image, especially the Side Grid format.
Agreed, links would be neat. Still amazing!
adjust the css so it’s targetting p tags instead of img tags. Then you can add links to the images. I have it working nicely here with a rollover on the container and links on the images. Have look: https://www.dropbox.com/s/m4k1jqftf2dx1gq/simple.zip
Great, Steve! I hadn’t worked on it yet but this is exactly what I had in mind. It’s a good path, thank you.
Very nice effects. Nice like always!
Very nice effect. This would be awesome if we apply to portfolio page!
Looking & working amazing like always 🙂
What about Compatible Browsers? SVG Friendly only ?
Awesome animation effects, its very good for portfolio pages. I like this.
Good Work , i like it !!
simply great results and i really learned a lot as newbie developer also appreciate your creative effort.
Ditch the js file and buttons and you can just add the following to your page for a nice hover effect…
$(‘.stack’).hover(
function(){ $(this).addClass(‘active’) },
function(){ $(this).removeClass(‘active’) }
)
Been trying to get it to work On Hover but seems unresponsive 🙁
Hey Mary Lou,
I’ve been reading most(!) of the posts on this site, really appreciating all the info, especially your posts and tutorials. Very clear, very usefull! Thanks thusfar.
Have you read “Rethinking Responsive SVG” seems like a fun subject for a new tut!
Cheers,
Rene
very awesome plugin
tanx a lot
This is great. It’s always a treat to come across helpful bits like this. It really helps adding more goodies to the design toolbox. Thanks
awesome animation..
So pretty, smooth and varied. Loved seeing the thumbnail grid animations as well. The demo page has such a tasteful design!
Very nice effect,Nice like always!
Beautiful effects. This may be a silly newbie question but how are the button elements changing the classes with code as simple as “Toggle effect”? Does it have to do with being in the same , or is there some sort of listener that activates the JS or what?
Oops, lost some of my tags …code as simple as “<button>Toggle effect</button>”? Does it have to do with being in the same <section>, or…