The Lab | Images Decoration

Blur effect on hover <style> .blur-image { filter: blur(5px); transition: filter 0.5s ease; } .blur-image:hover { filter: blur(0); } </style> <img src="your-image.jpg" class="blur-image"> Created by myself	Zoom effect on hover <style> .zoom-image { transition: transform 0.5s ease; } .zoom-image:hover { transform: scale(1.2); } </style> <img src="your-image.jpg" class="zoom-image"> Created by myself	Drop Shadow Effect <style> .shadow-image { box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.5); transition: box-shadow 0.5s ease; } .shadow-image:hover { box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.8); } </style> <img src="your-image.jpg" class="shadow-image"> Created by myself	Rotate Effect <style> .rotate-image { transition: transform 0.5s ease; } .rotate-image:hover { transform: rotate(15deg); } </style> <img src="your-image.jpg" class="rotate-image"> Created by myself
Overlay Color Effect <style> .overlay-image { position: relative; display: inline-block; } .overlay-image img { display: block; transition: opacity 0.5s ease; } .overlay-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 0, 0, 0.5); opacity: 0; transition: opacity 0.5s ease; } .overlay-image:hover::after { opacity: 1; } </style> <div class="overlay-image"> <img src="your-image.jpg"> </div> Created by myself	Glow Effect <style> .glow-image { transition: filter 0.5s ease; } .glow-image:hover { filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.8)); } </style> <img src="your-image.jpg" class="glow-image"> Created by myself	Fade Effect <style> .fade-image { opacity: 0.5; transition: opacity 0.5s ease; } .fade-image:hover { opacity: 1; } </style> <img src="your-image" class="fade-image"> Created by myself	Reflection Effect <style> .reflection-image { position: relative; display: inline-block; } .reflection-image::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 50%; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)); transform: scaleY(-1); opacity: 0.5; } </style> <div class="reflection-image"> <img src="your-image.jpg"> </div> Created by myself
Sepia Effect <style> .sepia-image { filter: sepia(80%); transition: filter 0.5s ease; } .sepia-image:hover { filter: sepia(0%); } </style> <img src="your-image.jpg" class="sepia-image"> Created by myself	Contrast Effect <style> .contrast-image { filter: contrast(50%); transition: filter 0.5s ease; } .contrast-image:hover { filter: contrast(150%); } </style> <img src="your-image.jpg" class="contrast-image"> Created by myself	Invert Color Effect <style> .invert-image { filter: invert(100%); transition: filter 0.5s ease; } .invert-image:hover { filter: invert(0%); } </style> <img src="your-image.jpg" class="invert-image"> Created by myself	Saturation Effect <style> .saturate-image { filter: saturate(50%); transition: filter 0.5s ease; } .saturate-image:hover { filter: saturate(200%); } </style> <img src="your-image.jpg" class="saturate-image"> Created by myself
Blur-Scale Effect <style> .blur-scale-image { filter: blur(2px); transform: scale(0.9); transition: all 0.5s ease; } .blur-scale-image:hover { filter: blur(0); transform: scale(1); } </style> <img src="your-image.jpg" class="blur-scale-image"> Created by myself	Gradient Effect <style> .gradient-overlay-image { position: relative; display: inline-block; } .gradient-overlay-image img { display: block; transition: opacity 0.5s ease; } .gradient-overlay-image::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)); opacity: 0; transition: opacity 0.5s ease; } .gradient-overlay-image:hover::after { opacity: 1; } </style> <div class="gradient-overlay-image"> <img src="your-image.jpg" alt="Imagem com Gradiente de Cor"> </div> Created by myself	Horizontal Slide Effect <style> .slide-horizontal-image { transition: transform 0.5s ease; } .slide-horizontal-image:hover { transform: translateX(20px); } </style> <img src="your-image.jpg" class="slide-horizontal-image"> Created by myself	Continuous Rotating Effect <style> .rotate-continuous-image { animation: rotate 5s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } </style> <img src="your-image.jpg" class="rotate-continuous-image"> Created by myself
Dynamic Rounded Effect <style> .dynamic-rounded-image { border-radius: 10px; transition: border-radius 0.5s ease; } .dynamic-rounded-image:hover { border-radius: 50%; } </style> <img src="your-image.jpg" class="dynamic-rounded-image"> Created by myself	Fade Blur Effect <style> .fade-blur-image { opacity: 0.7; filter: blur(2px); transition: all 0.5s ease; } .fade-blur-image:hover { opacity: 1; filter: blur(0); } </style> <img src="your-image.jpg" class="fade-blur-image"> Created by myself	Slide Vertical Effect <style> .slide-vertical-image { transition: transform 0.5s ease; } .slide-vertical-image:hover { transform: translateY(-20px); } </style> <img src="your-image.jpg" class="slide-vertical-image"> Created by myself	Fixed Rotation Effect <style> .fixed-axis-rotation-image { transition: transform 0.5s ease; transform-origin: top center; } .fixed-axis-rotation-image:hover { transform: rotate(10deg); } </style> <img src="your-image.jpg" class="fixed-axis-rotation-image"> Created by myself
Scale Shadow Effect <style> .scale-shadow-image { box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); transition: all 0.5s ease; } .scale-shadow-image:hover { transform: scale(1.1); box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); } </style> <img src="your-image.jpg" class="scale-shadow-image"> Created by myself	Color Transition Effect <style> .color-transition-image { filter: grayscale(100%); transition: filter 0.5s ease; } .color-transition-image:hover { filter: grayscale(0%); } </style> <img src="your-image.jpg" class="color-transition-image"> Created by myself	Diagonal Movement Effect <style> .diagonal-movement-image { transition: transform 0.5s ease; } .diagonal-movement-image:hover { transform: translate(20px, -20px); } </style> <img src="your-image.jpg" class="diagonal-movement-image"> Created by myself	Shake on Hover <style> .img-shake { animation: none; } .img-shake:hover { animation: shake 0.5s; animation-iteration-count: infinite; transition: .5s ease-in; } @keyframes shake { 0% { transform: translate(1px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% { transform: translate(3px, 2px) rotate(0deg); } 40% { transform: translate(1px, -1px) rotate(1deg); } 50% { transform: translate(-1px, 2px) rotate(-1deg); } 60% { transform: translate(-3px, 1px) rotate(0deg); } 70% { transform: translate(3px, 1px) rotate(-1deg); } 80% { transform: translate(-1px, -1px) rotate(1deg); } 90% { transform: translate(1px, 2px) rotate(0deg); } 100% { transform: translate(1px, -2px) rotate(-1deg); } } </style> <img src="your-image.png" class="img-shake"> Source
Star Mask <style> #star { mask-image: url("https://files.catbox.moe/m90ase.png"); mask-size: 50%; mask-repeat: no-repeat; mask-position: center; } </style> //PS: download the star mask on https://files.catbox.moe/m90ase.png <div id="star"><img src="your-image.jpg"></div> Source \| Direct Code	Fog Mask <style> .fogmask { mask-image: url("https://files.catbox.moe/qbbs1o.png"); mask-size: 93%; mask-repeat: no-repeat; mask-position: center; } </style> <img src="your-image.jpg" class="fogmask"> Source \| Direct Code	Circle Mask <style> .over { background: #FE82B624; mask-image: url("https://files.catbox.moe/u1ozp2.png"); mask-size: 100%; mask-repeat: no-repeat; position: center; } </style> //Ps: download the image of the mask on https://files.catbox.moe/u1ozp2.png <img src="your-image.jpg" class="over"> Source \| Direct Code	Flower Mask Please access the code directly via the source provided below. Source
Flower Mask 2 Please access the code directly via the source provided below. Source	Flower Mask 3 Please access the code directly via the source provided below. Source	Flower Mask 4 Please access the code directly via the source provided below. Source	Flower Mask 5 Please access the code directly via the source provided below. Source
Heart Mask 1 Please access the code directly via the source provided below. Source	Heart Mask 2 Please access the code directly via the source provided below. Source	Star Mask Please access the code directly via the source provided below. Source	Bun Mask Please access the code directly via the source provided below. Source
Please access the code directly via the source provided below. Source	Please access the code directly via the source provided below. Source	Please access the code directly via the source provided below. Source