Fandom

Community Central

Comments2

Carnage's Guide to CSS: Hover Image Opacity

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.

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.

CodeEdit

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