The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Light up from an image

View previous topic View next topic 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

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

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...

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;
}

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


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