Community Central


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.


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.

Also on Fandom

Random Wiki