Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website. Today we’d like to share some experimental hover effects with you. The idea is inspired by the hover effect seen on the grid of the Kikk 2015 website which was created by Dogstudio. We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect

A simple decorative slideshow component with individual slide layouts and effects. Powered by anime.js. Today we’d like to share a simple decorative slideshow component with you. The idea behind this slideshow is to have an individual layout for each slide, accompanied by a distinct effect. The images of each slide is meant to have a decorative purpose which could be suitable for an article header

An interactive transparency background effect that makes images visible when specific points are hovered, showing some content once clicked. Today we’d like to share a simple hover/click effect for images with you. The main idea is to show a map or a base image with some points of interest (POS) and when we come close to one of these points and hover, an image starts to fade in. When clicking on t

A tutorial on how to create multi-layer page reveal effects with a couple of ideas for inspiration. Today we’d like to show you how to create a simple and modern page transition effect. Maybe you have spotted some of the cool effects seen on sites like Nation or Keep Portland Weird, where two or more layers of overlays are animated across the page to reveal some new content. Let’s see how we can d

Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. Happy new year, everybody! Today we will create a CSS-only fullscreen background image slideshow. We’ll create different image transitions and also make a title appear using CSS animations. The images are by Ma

Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot “Like Animation” by Daryl Ginn. Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the li

A tutorial on how to create an intro animation where a decorative Polaroid stack becomes a grid similar to the effect seen on the takeit website. Today we’d like to show you how to create a very simple intro effect similar to the one seen on the takeit website where a stack of Polaroids gets animated to a grid when clicking on a button or when scrolling. On their site, the grid continues to get an

Some ideas for menu styles and effects that employ the line as a creative design element. This is an open collection; contributions are welcome! The line is an amazing design element. It’s so versatile and it allows us to use it for adding enjoyable animations or enhance points of interest. Today we’d like to share a set of ideas for using the line as a design element in horizontal menus. There ar

An interactive journey where a Canvas map path is animated according to the content that is scrolled on the page. Today we’d like to share an experimental demo with you. This demo is an interactive map that will animate a map path while scrolling the page. The main idea is to connect the story being told with the path itself. The journey can also contain images that will indicate where they have b

Some effect inspiration for card stacks. The idea is to show animation ideas for positive (accept) or negative (reject) feedback on a generic card element. Today we’d like to share some inspiration for card effects with you. The idea is to animate the top element of a stack by clicking on an accept or reject button. We’ve used this Tinder-like example to show some symmetric and complementing pairs

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect. Today we’d like to share a little image effect with you. The idea is to add a tilt effect to an image by subtly moving copies of layers of semi-transparent divisions with the respective background-image. Maybe you’ve seen this ef

A little slideshow with a color palette creation effect using CSS Filters and Vibrant.js. Today we’d like to share a fun little color extraction experiment with you. The idea is to create a color palette from an image with a subtle effect on the image itself and some fanciness on the palette. We are using Vibrant.js by Jari Zwarts to extract the colors from the images, and CSS Filters to transitio

A set of 40 carefully-crafted and pixel-perfect icons from the Squid.ink Flat Icon Pack exclusively for Codrops readers. The icons come in all commonly used formats. We are happy to share a great freebie today: an exclusive set of 40 pixel-perfect vector icons from Squid.ink. The set contains various clean and modern icons in all common formats. About the Set This carefully crafted taster set of 4

Some ideas for drag and drop interactions in a UI. The idea is to show a droppable area that stands for certain actions after an element is being dragged. Sometimes we wonder how to pack all those possible actions into a UI. From buttons to drop-downs to menus—there are certainly many possibilities. Another idea is to employ some kind of drag and drop interaction. Today we want to share some explo

A second set of styles was added to the collection of subtle hover effect ideas. The old set was updated and we’ve added some fresh effects with various transitions. We’ve updated and added some more effects to the Hover Effect Ideas. The second set contains some fresh styles that include the Font Awesome icon font and SVG backgrounds for some effects. The structure of the demos was a fullscreen g

A tutorial that shows how to recreate the four tiles slideshow effect seen on the website of Serge Thoroval. Using 3D transforms, transitions and animations, the aim is to implement a smooth effect and add some variations. Today we’d like to show you how to recreate the background image slideshow seen on the stunning website of Serge Thoroval’s Atelier that was coded and designed by talented Jean-