Mindblowing CSS Image Effects Every Designer Needs To Try
Images are vital to our web design projects. They instantly tell a story of the site’s purpose. They invite visitors to explore the site’s content whether it’s a personal portfolio or an ecommerce site for a client. Images have a profound effect, and with CSS filters, we can take our web images to new levels and improve our site’s performance at the same time.
Note: If you’d like to follow along with the examples mentioned here, download my git repo: https://github.com/levinmejia/css-image-effects
To start creating beautiful effects for our images through CSS, we first need to become familiar with CSS Filters. CSS filters gives us the ability to manipulate images by changing their colors and adding effects like blurs.
Here’s the image by Micki Spollen that we will be using to learn how we can make mindblowing image effects with CSS.
Let’s start by turning our color image into greyscale. We can manipulate our photo to become black and white with the following CSS snippet:
We can also do fun things like inverting the colors:
We can do more than change the image’s colors by doing things like adding a blur effect:
If you’re looking to add multiple effects, you can do so with the following syntax:
CSS filters are a powerful way to build your own unique photo effects, but if you’re looking for a plug and play solution, check out CSSgram. CSSgram is a tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes. CSSgram comes with 18 prebuilt effects. Here are a few examples:
The quickest way to get started with CSSgram is to download the CSSgram library and link it within your project:
Then, we’ll add one of the predefined classes in our html to add the effect to our photo:
For a list of all available effects, visit http://una.im/CSSgram/
CSS Blending Modes
If you have used Sketch or Photoshop you’re most likely familiar with blending modes. Blending modes can create powerful image effects and you can use them using CSS for your images. I have created four effects to help you get started with blending modes:
1. Overlay an element on top of a photo – in this case I have overlaid a circle element on top of my photo with the following code snippets:
2. Blend text – There are so many possibilities when you start combining text with images. Here’s how I accomplished the above example:
3. Background image blend with a solid colour:
4. Image blend effect using a gradient
If you have downloaded the Github repo for these examples, you will see that I have added this effect to the top navigation to create the blurring effect on the content below the navigation bar:
To learn more and check compatibility on backdrop filters, visit https://webkit.org/blog/3632/introducing-backdrop-filters/
Animating CSS Filters
Things get even more interesting when we start animating CSS Filters! We can trigger animations when a visitor hovers over an image or when they interact with our content (when clicking on a button, for example).
We can animate the CSS Filter on mouse hover with this CSS snippet:
If we want a CSS Filter to be animated when clicking a button, we can use code similar to the following:
Optimizing Site Performance with CSS Filters
Image Trends for 2016
Beautiful imagery dominated web design trends in 2015, and 2016 will not be any different. Now that we are familiar with and can animate CSS filters, we can create mindblowing image effects for our web projects with minimal effort to create beautiful layouts and interactions for our visitors.
Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC.
Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC…View More Posts