Home
| OPACITY OR CLARITY OF AN IMAGE ON HOVER |
OverviewDescriptionHere you will learn how to use CSS to create an effect of reduced opacity of an image when you hover your mose over it. We will both cover how an image becomes more transparent when you hover the image, as well as how it can be less transparent by default and become clearer by the touch of your mouse.Demonstration Technical limitations› This tutorial is in part dedicated to the forums powered by Forumotion free forum service. However, this will work on any website.› Requires to be the Founder of the #Forumotion Forum › It works with all Forumotion forums' versions › It only works with phpBB3/phpBB2/PunBB/Invision/AwesomeBB/ModernBB Forumotion forums' versions InstallationReduced opacity on hoverFor opacity on hover, insert this code in your administration control, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:You need to reply to the topic in order to see the code resources Customizing the opacity CSSIn order to explain how the effects can be customized, let us start by breaking the code into parts.► The lines below are responsible for the opacity at the beginning - when the mouse isn't on the image. The lower the value, the less visible the image will be.
If you wish to modify the value, you will have to do it for both lines. If not, the result might look different from browser to browser. As shown in the example, the
► The lines below are responsible of the duration of the transition time between the opacity and the return to lighter.
The same thing goes here: if you modify the value in one line, you will have to do it for all the lines. All for one and one for all. ► The lines below, gathered from the
Same thing here. If you modify the number of seconds one one line, you will have to modify the number of seconds on all lines. Increased opacity on hover (clarity)For clarity on hover, insert this code in your administration control, you need to go towards Administration Control Panel (ACP) Display CSS & Colors CSS Style Sheet and add append the following code:You need to reply to the topic in order to see the code resources Customizing the clarity CSSIn order to explain how the effects can be customized, let us start by breaking the code into parts.► The lines below are responsible of the duration of the transition time between the lighter and return to the opacity.
Same thing for here, if you modify the value, put the same value for every lines. ► These lines, gathered from the
If you wish to modify the value, you will have to do it for all lines. If not, the result might look different from browser to browser. As shown in the example, the
► The lines below, gathered from the
Same thing for here, if you modify the number of seconds, put the same value for every lines. HTML Content & Templates ModificationSo far we have created two CSS classes (+ both those classes' respective
First, if you want to apply it to an image on a Forumotion board, you will have to locate the template where that image is placed through Administration Control Panel (ACP) Display Templates . Then, you either change your image code to include
Your image code should now look something like the below, and you are finished!
Final considerationsBy following the steps in this tutorial, you will have added the opacity or clarity effects only to images that are given the
To instead, for instance, add the opacity effect to all images that are within your forum's posts, you could call the CSS class
Notes
|
| This resource belong to this community unless differently stated. No reproduction possible without our agreement, in accordance with article L122-1 of the CPI. |
