CODEWITHSUNDEEP
htmlcssbackground-imagecss-transitions
Lekstadt
Lekstadt

Reputation: 598

CSS: How to switch two background images with fading transition?

I want to switch between to background-image attributes on hover, but the default transition is too fast and sharp and I would like to incorporate a fade opacity transition for both of them. I would like it to fade when I hover and also when I stop hovering when it get reset to the original background-image. Any ideas?

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
    }
#HeaderLogo:hover {
        background: url('/hoverlogourl.png') no-repeat center;
    }

Upvotes: 0

Views: 1897

Answers (3)

nihar jyoti sarma
nihar jyoti sarma

Reputation: 541

You can use transition effect in HeaderLogo class

    -webkit-transition: background-image 0.2s ease-in-out;
    transition: background-image 0.2s ease-in-out;

Upvotes: 2

Priya jain
Priya jain

Reputation: 703

You can fade your background-image in various ways for example you can use:

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        -webkit-transition: background 0.5s linear;
        -moz-transition: background 0.5s linear;
        -o-transition: background 0.5s linear;
        transition: background 0.5s linear; 
    }
#HeaderLogo:hover {
        background: url('/hoverlogourl.png') no-repeat center;
    }

Upvotes: 3

lee
lee

Reputation: 111

#HeaderLogo {
        background: url('/logourl.png') no-repeat center;
        background-size: contain;   
        display: block;
        width: 800px;
        height: 100px;
        margin-left: auto;
        margin-right: auto;
        cursor: pointer;
        -webkit-transition: background-image 0.2s ease-in-out;
        transition: background-image 0.2s ease-in-out;
    }

Upvotes: 1

Related Questions