CODEWITHSUNDEEP
csshovercss-transitions
thairish
thairish

Reputation: 1043

CSS transition effect on images

I want to create a transition effect on images. I have it working on Chrome but it doesn't seem to be working in firefox (the opacity works and on hover it goes back to normal but doesn't create the transition effect.

My HTML is: 

<ul class="list-inline">
              <li>
                <a href="#">
                    <img id="email-footer" src="images/email.png" alt="Email" />
                </a>
              </li>
              <li>
                <a href="#" >
                    <img id="linkedin-footer" src="images/linkedin.png" alt="Linked in" />
                </a>
              </li>
</ul>

And the styling is: 

.list-inline img {
opacity: 0.3;
-webkit-transition: opacity 0.3s ease-out;
}

#linkedin-footer:hover {
opacity: 1;
-webkit-transition: opacity 0.3s ease-out;
}

#email-footer:hover {
opacity: 1;
-webkit-transition: opacity 0.3s ease-out;
}

My CSS isn't too good and I'm unsure why this is happening in Firefox. Any help is much appreciated, thank you.

Upvotes: 1

Views: 614

Answers (1)

dsgriffin
dsgriffin

Reputation: 68616

That's because the -webkit- prefix you've added refers to webkit browsers (of which Firefox is not one).

Note that as of version 26, Chrome is no longer a webkit browser either (however Safari still is, and you should keep the prefixed version for that reason + old Chrome version compatibility).

You could also include the -moz- and -o- prefixed versions for support in older versions of those respective browsers too if you liked.

I believe the cross-browser equivalent you'd need to add for each of your stylings is: transition:opacity 0.3s ease-out;.

Upvotes: 2

Related Questions