CSS Image Effects | Bypeople

deals

premiumpacks & css image effects (14 items)

Add different effects to your images and galleries by using these set of tools.

freebies

An image hover effect showcasing off splittingJS which is a JavaScript micro-library for splitting elements by words, characters, children and more...

An image hover effect showcasing off splittingJS which is a JavaScript micro-library for splitting elements by words, characters, children and more. When hovering over the images, the split elements are skewed and slightly spaced to create a sort of window-blind effect. Created by CodePen user flowuhh.

This is a pure CSS 3D image effect that showcases hidden planes that are going to be shown 1 by 1 when hovering over an image in a gallery. It esse...

This is a pure CSS 3D image effect that showcases hidden planes that are going to be shown 1 by 1 when hovering over an image in a gallery. It essentially flips the planes with a smooth motion, one after another with an arranged delay, and on mouseOut, it just transits backward. Created by CodePen user ycw.

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of bri...

A control section for CSS filter effects that allows you to easily manipulate images dynamically. The bottom slider bars controls the degree of brightness, contrast, blur, saturation, and color while the image on top showcases the changes in real time. Created by CodePen user Andreas Wik.

1059 UHD Backgrounds & Textures, Only $19! Ai & EPS Vector Formats, Transparent PNGs. Ultra HD Resolutions!

1059 UHD Backgrounds & Textures, Only $19! Ai & EPS Vector Formats, Transparent PNGs. Ultra HD Resolutions!

An image card flip effect by Codepen user Aron, it features both vertical and horizontal effects. A great resource to add to website/app galleries,...

An image card flip effect by Codepen user Aron, it features both vertical and horizontal effects. A great resource to add to website/app galleries, this snippet was created purely in CSS! 

A complete set featuring 42 Instagram filters created in pure CSS by PicturePan2. To use them, download the compiled and minified Instagram.css fil...

A complete set featuring 42 Instagram filters created in pure CSS by PicturePan2. To use them, download the compiled and minified Instagram.css files. Include instagram.css located in /dist in your website's or Web app part. All filters use the same HTML structure with different filter-[filter-name] classes.

A quick proof of concept for a hover effect utilizing mix-blend mode, and CSS gradients. Created by Codepen user Jon Daiello.

A quick proof of concept for a hover effect utilizing mix-blend mode, and CSS gradients. Created by Codepen user Jon Daiello.

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use ...

1000 Business Card Templates, only $14! Includes Editable Vector Files, Print Ready Templates 300 PDI CMYK, Dimensions 3.5" x 2.1". Commercial Use License.

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

 Awesome image transition effect triggered when hovering over the photo, created in pure CSS by Codepen user Callum Macrae.

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a g...

An image gallery with neat expanding panels made in pure CSS by Codepen user Shaw. Image panels expand to full width upon mouse hover, creating a great looking effect. It has keyboard support and CSS Vars to progressively enhance with animation.

Great looking image transition effect by codepen user Nikolay Talanov, this slider snippet creates a neat looking animation for both image and text...

Great looking image transition effect by codepen user Nikolay Talanov, this slider snippet creates a neat looking animation for both image and text transitions by splitting the image into 4 panels, then sliding them to create the complete view. Neat and must see slider effect!

6300+ Material Design Icons, Only $14! Vector Files Ai & SVG, Extended License, 24+ Industries From Web Design Icons to Medical, Education, & Multi...

6300+ Material Design Icons, Only $14! Vector Files Ai & SVG, Extended License, 24+ Industries From Web Design Icons to Medical, Education, & Multimedia Icons.

A cool and lightweight CSS 3D tilt effect created by Codepen user Peter Barr, the panels interact with the mouse position and follow it, tilting th...

A cool and lightweight CSS 3D tilt effect created by Codepen user Peter Barr, the panels interact with the mouse position and follow it, tilting the image as you move the pointer through. Desktop only!

This is a neat CSS and JS code snippet for making a before-after layer slider that allows up to 3 states to take advantage of. Created by Codepen u...

This is a neat CSS and JS code snippet for making a before-after layer slider that allows up to 3 states to take advantage of. Created by Codepen user Huw.

A snippet that allows for fun text on image color blending with amazing and visually appealing results.

A snippet that allows for fun text on image color blending with amazing and visually appealing results.

Massive 528+ Branding Templates Bundle, Only $19! Ai, PSD, & InDesign File Formats, Print Ready, 44 Complete Branding Packs in 1 With 98% Discount!

Massive 528+ Branding Templates Bundle, Only $19! Ai, PSD, & InDesign File Formats, Print Ready, 44 Complete Branding Packs in 1 With 98% Discount!

A nice vertical split effect to create amazing photo slideshows

A nice vertical split effect to create amazing photo slideshows

A duotone effect made with CSS and JavaScript similar to the one you see in suggested lists. The effect uses filters, blend modes, and pseudo-eleme...

A duotone effect made with CSS and JavaScript similar to the one you see in suggested lists. The effect uses filters, blend modes, and pseudo-elements, and it also has a different version.