Wikia

Community Central

Comments2

Carnage's Guide to CSS: Hover Image Opacity

Greetings fellow Wikians, I'm going explain to you guys how to make the partially transparent image fully opaque when your cursor is hovering over it. It is an image effect created with CSS. It could be an avatar, or another image on your wiki.

Code

If you want to know how to make the image fully opaque when your cursor hovers over it, copy this code:

img {
   opacity: number;
   -webkit-transition: opacity #s linear;
   -moz-transition: opacity #s linear;
   -o-transition: opacity #s linear;
   transition: opacity #s linear;
}
 
img:hover {
   opacity: 1;
}

Note: It is recommended to replace "number" and "#" with your own numbers.


If you have feedback and/or suggestions of this blog, feel free to comment on the blog.

Around Wikia's network

Random Wiki