Light up from an image

Go down

In progress Light up from an image

Post by Nibsy on April 11th 2014, 12:21 am

Hello,
I don't know if I may ask it here, but I'm looking for a code. A code for when you move your mouse over an image, the image will light up :3 As the affiliates in this forum: http://perished.actieforum.com/forum (Affiliates on the footer of the index) Thank you in advance!
Gr, Nele
avatar
Nibsy
New Member

Female Posts : 20
Reputation : 1
Language : Dutch (and English)
Location : Belgium

http://raposa.actieforum.com

Back to top Go down

In progress Re: Light up from an image

Post by Pizza Boi on April 11th 2014, 1:04 am

Hi Very Happy

If you're using a footer code, you have to have 2 parts of it Smile . This is an example:

Code:
#affiliates {
  opacity: 0.8;
}

And then:

Code:
#affiliates:hover {
  opacity: 1;
}

The trick they used was that they lowered the opacity of the pictures in the first code to dark so that when you hover it, they turn lighter Smile .

If you have a hard time understanding, please post here your full code for affiliates, including CSS so that we may help you Smile .

Regards,
Pizza Boi
avatar
Pizza Boi
Hyperactive

Male Posts : 2016
Reputation : 160
Language : French
Location : Pizza Hut!

http://redlustempire.forumtl.com/

Back to top Go down

In progress Re: Light up from an image

Post by Nibsy on April 11th 2014, 1:13 am

It didn't work but maybe because I used something different. For my Affiliates, I used this 'code':

Code:
<blockquote><a href="http://perished.actieforum.com"><img src="http://i44.tinypic.com/k48pp3.jpg" border="0" alt="Image and video hosting by TinyPic"></a><a href="http://www.dreamhorses.biz/forum.htm"><img src="http://i53.tinypic.com/288uvch.jpg" border="0" alt="Image and video hosting by TinyPic"></a></a><a href="http://chimorea-horses.actieforum.com/"><img src="http://i59.tinypic.com/2hwnsc1.jpg" border="0" alt="Image and video hosting by TinyPic"></a></a>
 </div>

It's not really a code.  I have pasted this below the template index_body and that was a easy way to put my Affiliates on the footer of my forum...
avatar
Nibsy
New Member

Female Posts : 20
Reputation : 1
Language : Dutch (and English)
Location : Belgium

http://raposa.actieforum.com

Back to top Go down

In progress Re: Light up from an image

Post by Ange Tuteur on April 11th 2014, 1:26 am

Hello Nibsy,

Change your HTML to :
Code:
<div id="afilBlock"><a href="http://perished.actieforum.com"><img src="http://i44.tinypic.com/k48pp3.jpg" border="0" alt="Image and video hosting by TinyPic"></a><a href="http://www.dreamhorses.biz/forum.htm"><img src="http://i53.tinypic.com/288uvch.jpg" border="0" alt="Image and video hosting by TinyPic"></a><a href="http://chimorea-horses.actieforum.com/"><img src="http://i59.tinypic.com/2hwnsc1.jpg" border="0" alt="Image and video hosting by TinyPic"></a></div>

And use the following CSS :
Code:
#afilBlock img {
    filter:alpha(opacity=70);
      -moz-opacity:0.7;
    -khtml-opacity:0.7;
           opacity:0.7;
}
#afilBlock img:hover {
    filter:alpha(opacity=100);
      -moz-opacity:1;
    -khtml-opacity:1;
           opacity:1;
}
avatar
Ange Tuteur
Forumaster

Male Posts : 13201
Reputation : 2917
Language : EN10, FR5, JA5
Location : Macungie, PA

https://github.com/SethClydesdale

Back to top Go down

Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum