TutorialBlog: Image Link Opacity

Assalamualaikum and hi,

BEFORE/ AFTER :

  

/////METHOD 1

Image link opacity is an effect to give blur effect to an image when hovered.

1. Log in > Dashboard > Design > Add A Gadget > Html/JavaScript
2. Copy code below:

<style type='text/css'>
a.linkopacity img {
filter:alpha(opacity=70);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;}
a.linkopacity:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0; }
</style>

3. Paste into javascript:
4. SAVE ! :)

/////METHOD 2

1. Log > Dashboard > Design > Edit Html
2. Ctrl+F, then find:
</body>

3. Then copy this code:

.img {
filter:alpha(opacity=100);
-webkit-transition-duration:.5s;
-moz-opacity:1.00;
opacity:1.00;
}
img:hover {
filter: alpha(opacity=100);
opacity:1.00;
}
.img:hover {
filter:alpha(opacity=60);
-moz-opacity:0.6;
opacity:0.6;
}

4. Paste above this code,  </body>
5. SAVE!
Source: Lyssa 1 2

Share your experience down below!