CSS hover fade effect - change fade out on mouse over (copy-paste code) | webdesign | WPPoland

Mariusz Szatkowski

EN

CSS Image Hover Effect - Smooth Fade Transition Tutorial

5.00 /5 - (29 votes )

Last verified: May 1, 2026

17min read

Tutorial

In the old days (jQuery era), we used .animate() or .fadeIn() for hover effects. In 2026, using JavaScript for this is a crime against performance.

CSS3 transition is hardware accelerated (handled by the GPU), smoother, and requires zero scripts.

If you searched for a CSS image hover effect, the shortest answer is this: add transition: opacity 0.3s ease-in-out; to the element, then change opacity on :hover. That pattern covers most image dimming, card thumbnails, button fades, and overlay reveals.

#How to change fade out effect on mouse over with CSS

The most common request is a smooth opacity change when the cursor enters or leaves an element. Here is the minimal pattern:

.element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 0.7;
}

That is the entire implementation. Three declarations on the base state, one on the hover state. The transition property tells the browser to animate the opacity change over 0.3 seconds with an ease-in-out curve.

This pattern works on images, buttons, cards, links, icons, and any other HTML element. Adjust the target opacity (0.7 in this example) to control how much the element dims. Lower values create a stronger fade effect.

For a fade-in effect on hover (element starts faded and becomes fully visible), reverse the values:

.element {
    opacity: 0.5;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 1;
}

#Why CSS transitions beat javascript

Performance Benefits:

GPU Acceleration: CSS transitions run on the graphics card, not the CPU
No JavaScript Execution: Zero script overhead, instant response
Browser Optimization: Browsers optimize CSS animations natively
Battery Friendly: Less CPU usage means longer battery life on mobile

The Numbers:

JavaScript animation: ~16ms per frame (60fps target)
CSS transition: <1ms overhead, browser handles the rest
File size: CSS is smaller than jQuery/JavaScript libraries

#Basic fade effect

Let’s say you have an image that should dim when you hover over it.

/* The Element */
.hover-image {
    opacity: 1;
    /* The Magic Part */
    transition: opacity 0.3s ease-in-out;
}

/* The Trigger */
.hover-image:hover {
    opacity: 0.7;
}

What happens:

Image starts at opacity: 1 (fully visible)
On hover, transitions to opacity: 0.7 (30% transparent)
Takes 0.3 seconds with smooth easing
Returns to opacity: 1 when hover ends

#Understanding transition properties

#Transition-property

Specifies which CSS property to animate. Always specify specific properties instead of all for better performance.

/* Good: Specific property */
transition: opacity 0.3s ease-in-out;

/* Better: Multiple specific properties */

/* Avoid: Animates ALL properties (performance hit) */

Animatable Properties:

opacity - Fade in/out
transform - Scale, rotate, translate
background-color - Color changes
width, height - Size changes (use transform instead)
border-radius - Rounded corners
box-shadow - Shadow effects

Non-animatable (avoid):

display - Use opacity + visibility instead
font-family - Instant change only

#Transition-duration

How long the animation takes. Common values:

/* Very fast (subtle) */
transition: opacity 0.15s;

/* Standard (sweet spot for UI) */

/* Slow (dramatic) */

/* Very slow (rarely used) */

Best Practices:

0.2-0.3s: Standard UI interactions (buttons, links)
0.15s: Micro-interactions (tooltips, badges)
0.4-0.6s: Page transitions, modal animations
>1s: Avoid (feels sluggish)

#Transition-timing-function

Controls the acceleration curve. This is what makes animations feel “natural.”

/* Linear: Constant speed (robotic) */
transition: opacity 0.3s linear;

/* Ease: Slow start, fast middle, slow end (default) */

/* Ease-in: Slow start, fast end */

/* Ease-out: Fast start, slow end (most natural) */

/* Ease-in-out: Slow start and end, fast middle (very smooth) */

/* Custom cubic-bezier (advanced) */

When to Use Each:

ease-out: Most UI elements (feels responsive)
ease-in-out: Smooth, elegant transitions
ease-in: Elements appearing (less common)
linear: Progress bars, loading indicators
cubic-bezier: Custom feel (use tools like cubic-bezier.com)

#Complete shorthand syntax

transition: [property] [duration] [timing-function] [delay];

Examples:

/* Single property */

/* Multiple properties */

/* With delay */

/* Different durations per property */

#Advanced hover effects

#1. Fade + scale (zoom effect)

Combine opacity and transform for a modern zoom effect:

.card-img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.3s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.card-img:hover {
    opacity: 0.9;
    transform: scale(1.05);
}

Why this works:

scale(1.05) zooms image 5% larger
Opacity slightly reduces for depth
Different durations create layered effect

#2. Fade + overlay text

Perfect for image galleries:

.image-container {
    position: relative;
    overflow: hidden;
}

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.image-container .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.image-container:hover img {
    opacity: 0.7;
    transform: scale(1.1);
}

.image-container:hover .overlay {
    opacity: 1;
}

#3. Fade + color change

For buttons and links:

.button {
    background-color: #0073aa;
    color: white;
    opacity: 1;
    transition: opacity 0.2s ease-out, background-color 0.2s ease-out;
}

.button:hover {
    opacity: 0.9;
    background-color: #005177;
}

.button:active {
    opacity: 0.8;
    transform: scale(0.98);
}

#4. Fade + shadow

Add depth on hover:

.card {
    opacity: 1;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: opacity 0.3s ease-in-out, box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.card:hover {
    opacity: 0.95;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    transform: translateY(-4px);
}

#Performance optimization

#Use transform instead of position/Size

Bad (triggers layout recalculation):

.element {
    left: 0;
    transition: left 0.3s;
}
.element:hover {
    left: 100px;
}

Good (GPU accelerated):

.element {
    transform: translateX(0);
    transition: transform 0.3s;
}
.element:hover {
    transform: translateX(100px);
}

#Limit animated properties

Bad:

transition: all 0.3s; /* Animates everything */

Good:

#Use will-change for complex animations

.animated-element {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

Note: Only use will-change on elements that will actually animate. Remove it when animation completes.

#Real-World examples

#Example 1: Product card

.product-card {
    position: relative;
    overflow: hidden;
}

.product-card img {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease-in-out, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover img {
    opacity: 0.8;
    transform: scale(1.1);
}

.product-card .badge {
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    transition: opacity 0.3s ease-out 0.1s;
}

.product-card:hover .badge {
    opacity: 1;
}

.nav-link {
    border-bottom: 2px solid transparent;
    transition: opacity 0.2s ease-out, border-color 0.2s ease-out;
}

.nav-link:hover {
    opacity: 1;
    border-bottom-color: #0073aa;
}

.nav-link.active {
    opacity: 1;
    border-bottom-color: #0073aa;
}

#Example 3: Image gallery

.gallery-item {
    position: relative;
    overflow: hidden;
}

.gallery-item img {
    opacity: 1;
    filter: brightness(1);
    transition: opacity 0.3s ease-in-out, filter 0.3s ease-in-out, transform 0.4s ease-out;
}

.gallery-item:hover img {
    opacity: 0.9;
    filter: brightness(0.8);
    transform: scale(1.05);
}

.gallery-item .caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: white;
    padding: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.gallery-item:hover .caption {
    opacity: 1;
    transform: translateY(0);
}

#Browser compatibility

CSS transitions are supported in all modern browsers:

Chrome/Edge: Full support (since version 26)
Firefox: Full support (since version 16)
Safari: Full support (since version 6.1)
Opera: Full support (since version 12.1)
IE: Partial support (IE 10+)

Fallback for Older Browsers:

/* Modern browsers */
.element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
}

.element:hover {
    opacity: 0.7;
}

/* Fallback: Instant change (no animation) */
/* Older browsers will just show the end state */

#Common mistakes to avoid

#Mistake 1: Using `all`

/* Bad: Animates everything, performance hit */
transition: all 0.3s;

/* Good: Specific properties */

#Mistake 2: Too long duration

/* Bad: Feels sluggish */

/* Good: Snappy and responsive */

#Mistake 3: Animating layout properties

/* Bad: Triggers layout recalculation */

/* Good: Use transform instead */

#Mistake 4: Missing hover state

/* Bad: No hover state defined */
.element {
    transition: opacity 0.3s;
}

/* Good: Define both states */
.element {
    opacity: 1;
    transition: opacity 0.3s;
}
.element:hover {
    opacity: 0.7;
}

#Testing and debugging

#Chrome devtools

Open DevTools (F12)
Select element with transition
Check “Animations” tab
See timeline and properties
Adjust timing in real-time

#Firefox devtools

Open DevTools (F12)
Select element
Check “Animations” panel
Visualize animation curve

#Test performance

/* Add this temporarily to see what's animating */
* {
    outline: 1px solid red !important;
}

Then check which elements are repainting (red flash = performance issue).

#Summary

CSS transitions are the modern, performant way to create hover effects. They’re:

✅ Fast: GPU accelerated, zero JavaScript
✅ Smooth: Browser-optimized animations
✅ Simple: One line of CSS
✅ Accessible: Respects prefers-reduced-motion
✅ Maintainable: Easy to modify and debug

Key Takeaways:

Use specific properties, not all
0.2-0.3s is the sweet spot for UI interactions
ease-out feels most natural
Use transform instead of position/size properties
Combine multiple properties for rich effects
Test on real devices for performance

In 2026, CSS transitions are the standard for hover effects. JavaScript animations are only needed for complex, interactive animations that CSS can’t handle.

#CSS Animations vs Transitions

#When to use animations vs transitions

Transitions:

Triggered by state changes (hover, focus, active)
Two states: from → to
Simple, predictable
Best for: buttons, links, cards, images

Animations (@keyframes):

Complex multi-step sequences
Runs automatically or on trigger
Can loop, pause, reverse
Best for: loading spinners, complex effects, continuous motion

#Basic @keyframes animation

/* Define the animation */
@keyframes fadeInOut {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    50% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* Apply the animation */
.fade-animation {
    animation: fadeInOut 2s ease-in-out infinite;
}

/* Animation on hover */
.fade-on-hover:hover {
}

#Animation properties in detail

.element {
    /* Name and duration */
    animation-name: fadeIn;
    animation-duration: 0.5s;

    /* Timing function */
    animation-timing-function: ease-in-out;

    /* Delay before start */
    animation-delay: 0.2s;

    /* How many times to play */
    animation-iteration-count: infinite; /* or 1, 2, 3... */

    /* Direction */
    animation-direction: normal; /* normal, reverse, alternate, alternate-reverse */

    /* Play state (for pausing) */
    animation-play-state: running; /* or paused */

    /* Fill mode (styles before/after) */
    animation-fill-mode: forwards; /* none, forwards, backwards, both */

    /* Shorthand */
    animation: fadeIn 0.5s ease-in-out 0s 1 normal forwards;
}

/* Pause animation on hover */
.animated-element:hover {
    animation-play-state: paused;
}

#Complex hover animation example

/* Pulsing CTA button */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.7);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 15px rgba(0, 115, 170, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0);
    }
}

.cta-button {
    animation: pulse 2s infinite;
}

.cta-button:hover {
}

#Advanced Hover Effects

#1. Reveal hidden content

.reveal-container {
    position: relative;
    overflow: hidden;
}

.reveal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.reveal-container:hover .reveal-content {
    opacity: 1;
    transform: translateY(0);
}

/* Slide from bottom variant */
.slide-bottom {
}
.slide-bottom:hover {
}

/* Slide from top variant */
.slide-top {
}
.slide-top:hover {
}

/* Slide from left variant */
.slide-left {
}
.slide-left:hover {
}

/* Slide from right variant */
.slide-right {
}
.slide-right:hover {
}

#2. Blur effect

.blur-hover img {
    filter: blur(0);
    transition: filter 0.3s ease-in-out;
}

.blur-hover:hover img {
    filter: blur(5px);
}

/* Blur + scale combination */
.blur-scale {
    transition: filter 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.blur-scale:hover {
    filter: blur(3px) brightness(0.8);
    transform: scale(1.05);
}

#3. Grayscale to color

.grayscale-to-color img {
    filter: grayscale(100%);
    transition: filter 0.3s ease-in-out;
}

.grayscale-to-color:hover img {
    filter: grayscale(0%);
}

/* Partial grayscale (80%) */
.partial-grayscale img {
    transition: filter 0.3s ease-in-out;
}

.partial-grayscale:hover img {
    filter: grayscale(0%);
}

#4. Tilt effect

.tilt-card {
    perspective: 1000px;
    transform-style: preserve-3d;
}

.tilt-card-inner {
    position: relative;
    transform: rotateX(0deg) rotateY(0deg);
    transition: transform 0.3s ease-out;
    transform-style: preserve-3d;
}

.tilt-card:hover .tilt-card-inner {
    transform: rotateX(5deg) rotateY(5deg);
}

/* More dramatic tilt */
.tilt-card.dramatic:hover .tilt-card-inner {
}

#5. Glitch effect

@keyframes glitch {
    0% {
        clip-path: inset(50% 0 30% 0);
        transform: translate(-5px, 0);
    }
    20% {
        clip-path: inset(20% 0 60% 0);
        transform: translate(5px, 0);
    }
    40% {
        clip-path: inset(40% 0 40% 0);
        transform: translate(-5px, 0);
    }
    60% {
        clip-path: inset(80% 0 5% 0);
        transform: translate(5px, 0);
    }
    80% {
        clip-path: inset(10% 0 70% 0);
        transform: translate(-5px, 0);
    }
    100% {
        clip-path: inset(30% 0 50% 0);
        transform: translate(5px, 0);
    }
}

.glitch-effect:hover {
    animation: glitch 0.3s linear infinite;
}

#CSS Custom Properties (Variables)

#Using variables for reusable effects

:root {
    --transition-duration: 0.3s;
    --transition-easing: ease-in-out;
    --hover-opacity: 0.8;
    --hover-scale: 1.05;
}

.hover-effect {
    opacity: 1;
    transition: opacity var(--transition-duration) var(--transition-easing),
                transform var(--transition-duration) var(--transition-easing);
}

.hover-effect:hover {
    opacity: var(--hover-opacity);
    transform: scale(var(--hover-scale));
}

/* Dark mode variant */
@media (prefers-color-scheme: dark) {
    :root {
        --hover-opacity: 0.9;
    }
}

#Scoped variables

.card-grid {
    --card-transition: 0.3s ease-out;
    --card-hover-transform: translateY(-5px);
}

.card {
    transition: all var(--card-transition);
}

.card:hover {
    transform: var(--card-hover-transform);
}

/* Button variant */
.button-grid {
    --btn-transition: 0.2s ease;
    --btn-hover-opacity: 0.85;
}

.btn {
    transition: all var(--btn-transition);
}

.btn:hover {
    opacity: var(--btn-hover-opacity);
}

#Accessibility Considerations

#Respecting reduced motion

/* Default: animations enabled */
.animated-element {
    transition: opacity 0.3s ease-in-out;
    animation: fadeIn 0.5s ease-in-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: none;
        animation: none;
    }
}

/* Alternatively: provide subtle alternative */
@media (prefers-reduced-motion: reduce) {
    .animated-element {
        transition: opacity 0.1s ease;
    }

    .complex-animation {
        animation: none;
        opacity: 1;
    }
}

#Focus states

/* Ensure hover effects also work on focus */
.interactive-element {
    opacity: 1;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.interactive-element:hover,
.interactive-element:focus {
    opacity: 0.8;
    transform: scale(1.02);
}

/* Focus visible for keyboard navigation */
.interactive-element:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

#Touch device considerations

/* Remove hover effects on touch devices */
@media (hover: none) {
    .hover-only-effect:hover {
        /* No hover state */
        transform: none;
    }
}

/* Enable hover effects only on devices with hover */
@media (hover: hover) {
    .hover-only-effect {
        transition: transform 0.3s ease-in-out;
    }

    .hover-only-effect:hover {
        transform: scale(1.05);
    }
}

#Performance Deep Dive

#Understanding browser rendering

Browser rendering pipeline:

Style - Calculate CSS rules
Layout - Calculate element positions (expensive!)
Paint - Draw pixels (expensive!)
Composite - Layer merging (GPU accelerated)

Properties by performance cost:

Property	Cost	Notes
`opacity`	Low	Composite only
`transform`	Low	GPU accelerated
`filter`	Medium	Can be GPU accelerated
`background-color`	Medium	Repaint required
`width/height`	High	Layout recalculation
`top/left`	High	Layout recalculation
`box-shadow`	High	Repaint required

#Using CSS containment

.animated-container {
    contain: layout paint;
    /* Isolates the element for better performance */
}

.animated-child {
    will-change: transform, opacity;
    transition: transform 0.3s, opacity 0.3s;
}

#Optimizing for Core Web Vitals

CLS (Cumulative Layout Shift):

/* Reserve space to prevent layout shift */
.animated-element {
    transform: translateZ(0); /* Creates a new compositing layer */
    backface-visibility: hidden; /* Better performance */
}

INP (Interaction to Next Paint):

/* Quick transitions for responsiveness */
.responsive-element {
    transition: transform 0.15s ease-out; /* Fast response */
}

#WordPress Integration

#Adding CSS via customizer

// Add to functions.php
function wppoland_custom_css() {
    ?>
    <style type="text/css">
        /* Custom hover effects */
        .custom-hover img {
            opacity: 1;
            transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
        }

        .custom-hover:hover img {
            opacity: 0.85;
            transform: scale(1.03);
        }

        /* Button hover */
        .custom-button {
            transition: all 0.2s ease-out;
        }

        .custom-button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
    </style>
    <?php
}
add_action('wp_head', 'wppoland_custom_css');

#Gutenberg block styles

/* WordPress block editor styles */
.wp-block-image .hover-effect img {
    transition: all 0.3s ease-in-out;
}

.wp-block-image .hover-effect:hover img {
    transform: scale(1.05);
    filter: brightness(0.9);
}

/* Cover block hover */
.wp-block-cover .hover-cover {
    transition: transform 0.4s ease-in-out;
}

.wp-block-cover:hover .hover-cover {
    transform: scale(1.02);
}

#Elementor widgets

/* Elementor image box */
.elementor-image-box-img {
    transition: all 0.3s ease-in-out;
}

.elementor-image-box:hover .elementor-image-box-img {
    transform: scale(1.05);
    filter: brightness(1.1);
}

/* Elementor button */
.elementor-button {
    transition: all 0.2s ease-in-out;
}

.elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#CSS Frameworks Integration

#Tailwind CSS

<!-- Tailwind hover utilities -->
<img class="transition-all duration-300 ease-in-out hover:opacity-80 hover:scale-105"
     src="image.jpg" alt="Hover effect with Tailwind">

<!-- Custom transition -->
<button class="transition-all duration-200 ease-out hover:-translate-y-1 hover:shadow-lg">
    Hover me
</button>

#Bootstrap

/* Bootstrap custom hover */
.custom-hover {
    transition: all 0.3s ease-in-out;
}

.custom-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* Override Bootstrap transitions */
.btn-custom {
    transition: all 0.2s ease-out;
}

#Custom CSS Grid with hover

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.card-grid .card {
    transition: all 0.3s ease-in-out;
}

.card-grid .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* Staggered animation */
.card-grid .card:nth-child(1) { transition-delay: 0ms; }
.card-grid .card:nth-child(2) { transition-delay: 50ms; }
.card-grid .card:nth-child(3) { transition-delay: 100ms; }
.card-grid .card:nth-child(4) { transition-delay: 150ms; }

#Complete Reference: Transition Values

Property	Default	Common Values
`transition-property`	all	opacity, transform, filter
`transition-duration`	0s	0.2s, 0.3s, 0.5s, 1s
`transition-timing-function`	ease	ease, linear, ease-in, ease-out, ease-in-out
`transition-delay`	0s	0.1s, 0.2s, 0.5s

Timing functions reference:

/* Preset */
ease        /* Slow start, fast middle, slow end */
linear       /* Constant speed */
ease-in      /* Slow start, fast end */
ease-out     /* Fast start, slow end */
ease-in-out  /* Slow start and end */

/* Custom bezier */
cubic-bezier(0.4, 0.0, 0.2, 1)      /* Material Design */
cubic-bezier(0.25, 0.46, 0.45, 0.94) /* Smooth */

/* Steps */
steps(5)       /* 5 discrete steps */
steps(5, start)  /* Start immediately */
steps(5, end)    /* Wait before starting */

#Quick Reference: Effect Presets

Subtle:

transition: all 0.2s ease-out;

Standard:

Smooth:

Bounce:

Quick:

Keywords: CSS hover effects, CSS transitions, CSS animation, fade in fade out, hover animation, CSS transform, CSS opacity, CSS keyframes, CSS3 transitions, hover effects tutorial, CSS animation tutorial, smooth animations, GPU acceleration, performance CSS animations, responsive hover effects, touch device hover, accessibility animations, WordPress CSS hover, Gutenberg block styles, Elementor hover effects, Tailwind hover utilities.

Explore our professional WordPress development to take your project further.