Community Central

User blog:Ultimate Dark Carnage/Carnage's Guide to CSS: Hover Image Opacity


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.

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.