Website designers used to rely solely on Photoshop to style their images. Now, CSS image effects are popular design assets for websites and browsers.
An image is an important web design element. It tells the site’s story and purpose and motivates visitors to explore the site’s content.
Whether you are building a personal portfolio or an eCommerce website for a client, CSS image effects can be used to style your images.
CSS Image Effects Templates
There are hundreds of CSS image effect (filter property) examples online but it will take you quite a while to filter them all and pick the ones that are actually useful.
This article is a list of the top 53 CSS image effects. Click the header links to view the code and media queries for each template.
Optic Shop Showcase Slider
Solar System Showcase Slider
Deep Dive Ocean Water Effect
Photographer & Videographer Slider
Paintbrush Effect Collection
Classic Cars Before After Hero
CSS Mix Blend Mode Templates
Particle Effect One Slider
A Pen by Porecelanosa
Author: Porcelanosa
Made with: HTML, CSS
This option supports Mix-blend mode with a centered background image.
[CSS] anime effect
Author: Rplus
Made with: CSS, HTML
Here is a CSS anime with image hover effects and Mix-blend-mode.
Image Mosaic Effect With CSS Grids and Blend Modes
Author: Dudley Storey
Made with: HTML,SCSS
This filter effect is separated into various image boxes against a white background. This combination of image boxes creates the perfect max-width layout for the site’s UI.
Pen by Addison Staples
Author: Addison Staples
Made with: HTML, CSS
This example supports Mix-Blend mode with the background position of the image centered.
Templates With A Centered Background Position
A Pen by Arien
Author: Arien
Made with: HTML, CSS
Arien’s template is a CSS infrared image effect with a centered background image.
One background for multiple divs
Author: Ivan Bogachev
Made with: HTML (Pug), CSS (Less)
This fancy image effect for your browser or website, features a demo image with three layers.
A Pen by Saudad Marketing
Author: Saudad Marketing
Made with: CSS, HTML
This example uses pseudo-elements and a mirror effect.
Flexible multi-panel background
Author: Ana Tudor
Made with: HTML (Pug), CSS (SCSS)
Here is a beautiful image animation with a centered background-position.
A Pen by Saudad Marketing
Made with: HTML, CSS
This option features a fun photo-border effect. The border images are generated from the parent element in the middle. The code consists of a background size of 60% and 20% respectively with a centered background-position.
A Pen by Davy Peter Braun
Author: Davy Peter Braun
Made with: HTML, CSS
This is Davy Braun’s image with a hallucination effect. Its offset and height values are 5 px and 100 vh respectively.
colored pencil effect on image pure css
Author: erman enginler
Made with: CSS, HTML
Here is a design with a colored pencil effect and a centered background position.
A Pen by Julio Bonjoch
Author: Julio Bonjoch
Made with: HTML
This colorful example works great on modern browsers like Google, Firefox, and Internet Explorer.
2.5D
Author: Matt Drew
Made with: CSS, HTML
The 2.5D option contains far-field effects that make pictures slide slowly. It has a box shadow but does not activate with image hover effects. 2.5 is great for old memories and old-age pictures.
hallucination-effect
Author: vr201
Made with: HTML, CSS
A beautiful hallucination effect with a centered background image.
Night-Vision Image Effect Templates
A Pen by tr13ze
Author: tr13ze
Made with: HTML, CSS
With the night vision and blur effect, your image will have a unique look. There are links within the code to access the stock image galleries
A Pen by Hoo Ja Oh
Creator: Hoo Ja Oh
Made with: CSS, HTML
This is a template with a night vision background color effect. The background-position of the image is centered with the background image code reflecting ‘$url’.
A Pen by Rick Metzger
Author: Rick Metzger
Made with: HTML, CSS
Here is a $url night vision effect with a centered background-position.
Pencil And Watercolor Effect Templates
A Pen by ha quang thien
Author: Ha Quang Thien
Made with: CSS, HTML
This CSS image features a pencil effect filter.
A Pen by Woody
Author: Woody
Made with: HTML, CSS
This example features the watercolor effect. The image code can be altered in many ways, including the:
- Background size
- Blur value
- Background position
- Brightness etc.
A Pen by Shaman Tito
Author: Shaman Tito
Made with: HTML, CSS
This example supports the Polaroid image effect.
Templates With Image Hover Effects
3D perspective mouse hover image
Author: Eriksen
Made with: HTML, CSS
The 3D Perspective Mouse Hover Image effect activates when the user hovers over the photo.
CSS Glitch Image Effect
Author: Nathan Dickison
Made with: HTML, CSS
In this example, the demo picture has clear details but activates with a glitch effect when hovered.
CSS Clip-Path Hover Effect
Author: Ryan Mulligan
Made with: HTML, CSS
Here is an animated CSS clip-path template that activates with the hover effect.
Glitch Effect on Hover
Author: Ryan Yu
Made with: HTML, SCSS
This design features a CSS clip-path glitch effect without JavaScript.
Kitties! (hover images)
Creator: Ana Tudor
Made with: CSS, HTML
This option activates with a hover effect but there is no edge support for the pentagons. It looks great because of the clip-path and the box-shadow feature around the pentagons.
Css Image Hover Effects
Author: Yaroslavw
Made with: CSS, HTML
For this option, photos are displayed within a content box. When the user hovers over the images, they slide from right to left to reveal text.
Grid Image Effect
Author: Jesús Gracia
Made with: HTML, CSS
An amazing grid effect that activates with the CSS image-hover effect.
Zoom iMage with scale
Author: Omar Dsoky
Made with: CSS, HTML
When the user hovers over the picture, the text disappears to display the full image.
When Life Gives You Lemons
Author: Collin Smith
Made with: CSS, HTML
In this template image hover, effects can be used for links to categories or posts. The container is skewed and the background image is kept straight.
CPC · Image hover · 01
Author: Noah Delagardelle
Made with: HTML, CSS
This design activates with the CSS image hover effect.
Colored Overlay Using “box-shadow”.
Creator: Preethi
Made with: HTML, CSS
This example has a colored overlay effect with a box-shadow for images.
Perspective Tilty Images
Author: Henry Desroches
Made with: HTML, CSS
This template t uses transform: matrix3d() in the CSS code. The image animation activates when hovered over.
Pure CSS Thumbnail Hover Effect
Author: Aysha anggraini
Made with: HTML, CSS
Here’s a jQuery option that features 6 fallback images that activate with the hover effect. You can adjust the code or use this option to display multiple photos at once. Click the header link to view tutorials for these thumbnail themes.
Image Hover – CSS (filters & transitions) – CodePen Challenge
Author: Vlad Racoare
Made with: HTML, CSS
This image effect activates when hovered. It uses elements like:
- Transforms
- Filters
- Positioning
- And Pseudo-elements
Water Your Cat
Author: Ana Tudor
Made with: HTML, SCSS
This is a beautiful design for websites. Above the center picture, there is a checkbox to the left of the demo text (water your cat so it grows). When the user clicks into it, the center image transforms. This option also has an image hover function that activates on the checkbox.
Simple Pulsing Image Hover Effect
Author: Alex Raven
Made with: CSS, HTML
When site visitors hover the cursor over an image, the effect is activated with a blurry gray square at the center of the image box.
Image revealing from text on hover
Author: Web-tiki
Made with: HTML, CSS
Here is a responsive thumbnail image for any browser or web design project. You can include text that inspires the user to hover over the image box. Once the viewer points the cursor at the image, the text disappears and transitions into the image.
3D image hover CSS
Author: Shounak Ghosh
Made with: HTML, CSS
A beautiful image animation effect that activates when hovered.
CSS Image Templates With Multiple Effects
Image with reflection and proximity effect on hover
Author: Tiago Alexandre Lopes
Made with: HTML, CSS
This template features the image with reflection and image hover effects.
Image Effects
Author: Dominik Suter
Made with: HTML, CSS
As the user scrolls, images display from blurry to clear with crisp colors. In addition, there is an effect that can make your images fade away because of no colors.
CSS Gradient Hover Effect
Author: Jon Daiello
Made with: HTML, SCSS
A CSS template that utilizes mix-blend-mode and image hover effects.
Images Hover Animations
Author: Stas Melnikov
Made with: HTML, CSS
This option features a variety of fallback animations and CSS image hover effects. Each image effect activates with a blurry purple screen covering it.
Simple CSS Image Effects
Author: Ion Emil Negoita
Made with: CSS, HTML
Here is a code for creating stunning CSS filters that can be applied to any image on your website. Each demo has a different background color with a filter brightness of 70%.
CSS Blend Modes
Author: Eddie Solar
Made with: HTML, CSS
This option experiments with different CSS blend modes. It offers various fallback web templates in the event the client dislikes the first demo.
hallucination effect
Author: Soruly
Made with: CSS, HTML
The Hallucination Effect template displays a lovely full-page anime image. The code supports mix blend mode and includes elements like:
- Background-image set to $url
- Background-size set to cover
- Background-position set to center
A Pen by Luchadora
Author: Luchadora
Made with: CSS, HTML
This option uses the overlay effect to add interactivity to site images and activates with the hover effect. It includes code parameters, such as:
- Background image URL
- Background size
- Background-position
- Background-repeat
image selector with reflection
Author: Paul
Made with: CSS, HTML
A design that uses radio buttons to select images. It features the reflection, background color transition, and image hover effects. The background-position of the reflection effect is coded to the bottom of the image.
Portfolio Items CSS3 transitions effects
Author: foxeisen
Made with: HTML, SCSS
This design features five transition effects for portfolio image items. It uses the portfolio and image hover effects.
A Pen by Airen
Author: Airen
Made with: CSS, HTML
Use this image effect to heighten the user experience of visitors to your website. It supports filter, invert, and mix blend mode.
Magnifying Glass image effect using CSS
Author: Santosh Goswami
Made with: HTML, CSS
The Magnifying Glass Image Effect scans images under a rectangle mirror. This mirror moves across the UI from left to right, vice versa, and enlarges objects. This is an attractive option for designing a browser or website.
FAQs about CSS image effects
1. How can I add a drop shadow effect to an image in CSS?
The CSS box-shadow property can be used to provide a drop shadow effect to an image. You can add a shadow to any element, even an image, with this attribute. The shadow’s position, size, blur, and color are all adjustable. For instance, you can use the CSS code shown below to generate a simple drop shadow effect to an image:
img {
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}
2. What is the CSS filter property and how can it be used to modify images?
You can apply a variety of image effects and adjustments, like grayscale, blur, brightness, and more, using the CSS filter property. Without changing the image file itself, you can change images directly in CSS by using the filter property. For instance, you can use the CSS code below to apply a grayscale effect to an image:
img {
filter: grayscale(100%);
}
3. How can I add a hover effect to an image in CSS?
With the CSS:hover selector, you may give an image a hover effect. When a user hovers their mouse over an element with this selector, you can apply styles to that element. For instance, you can use the CSS code below to make a straightforward opacity transition on hover:
img {
opacity: 1;
transition: opacity 0.3s ease-in-out;
}
img:hover {
opacity: 0.7;
}
4. How can I create a grayscale effect on an image using CSS?
As was already said, you can make a picture grayscale by using the CSS filter property. With this effect, the image loses all color and is reduced to a variety of grayscales. For instance, you can use the CSS code below to apply a grayscale effect to an image:
img {
filter: grayscale(100%);
}
5. What is the CSS opacity property and how can it be used to make an image transparent?
The CSS opacity property regulates an element’s transparency, including that of an image. An opacity value of 1 means the element is totally opaque, while a value of 0 means the element is fully transparent. You can use the CSS code shown below, for instance, to make an image 50% translucent.
img {
filter: blur(5px);
}
6. How can I create a blur effect on an image using CSS?
Moreover, a blur effect can be added to a picture using the CSS filter property. The image will appear hazy or out of focus as a result of this impact. For instance, you can use the CSS code below to add a blur effect to an image:
img {
filter: blur(5px);
}
7. How can I apply a sepia effect to an image in CSS?
A sepia effect can be added to an image using the CSS filter property, much as the grayscale effect. This effect will give the picture a rusty, brown appearance. For instance, you can use the CSS code below to add a sepia effect to an image:
img {
filter: sepia(100%);
}
8. How can I create a zoom-in effect on an image using CSS?
To give an image a zoom-in look, utilize CSS transitions. When the user hovers over the image, this effect will make it appear larger and more noticeable. For instance, you can use the CSS code below to add a zoom-in effect to an image:
img {
transition: transform
0.3s ease-in-out;
}
img:hover { transform: scale(1.2);
}
9. What is the CSS transition property and how can it be used to create image animations?
To create fluid animations between two states of an element, utilize the CSS transition property. You may specify the property to animate, the length of the animation, the timing function, and more with CSS transitions. CSS transitions can be used to alter properties like opacity, transform, or position to produce graphic animations. For instance, you can use the CSS code below to give a picture a straightforward fade-in effect:
img {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
img.fade-in {
opacity: 1;
}
10. How can I use CSS to make an image appear as if it’s moving or sliding?
To add sliding or moving effects to an image, utilize CSS animations. This can be done by gradually altering the image’s location, transform, or other attributes. For instance, you can use the CSS code below to give a picture a sliding effect:
img {
position: relative;
left: 0;
transition: left 0.3s ease-in-out;
}
img.slide {
left: 100px;
}
This will use an ease-in/ease-out timing function to move the image 100 pixels to the right over the course of 0.3 seconds. You may make a variety of dynamic picture effects with CSS by modifying the animation’s parameters and timing.
Ending thoughts on these CSS image effects
Gone are the days when web designers had to rely solely on Photoshop for filter effects. For great filter and image hover effects, etc. grab a CSS image effect from this list.
CSS image effects display on all screen sizes and modern browsers. So, when creating a personal portfolio, website of any kind, browser, etc. use CSS image effects to style your images.
If you liked this article about CSS image effects, you should check out this article about CSS progress bars.
There are also similar articles discussing CSS select styles, CSS loaders, CSS login forms, and CSS background patterns.
And let’s not forget about articles on CSS dropdown menus, CSS border animations, CSS arrows, and CSS cards.