How to make color effect when pointing to some banner

One more question ^^

Here I post 2 images, the first one is the normal view of the image, the 2nd one is when I point it with the mouse to open the section, it's becomes darker.

How is it possible to reach this effect? It can be darker or lighter or red or any other color, how can I make the same effect for my banners?

Thanks in advance

Hi,

Are you speaking of a hover effect? You want it to work with images or color?

http://www.duelacademy.net/forum

you can see it here, just point the mouse to any section and it will change to another color, I would like to do something similar, I'm not sure if this is called hover effect.

Just the banner or any other images? Please provide your forum URL. Thank you.


Add this to any image you're going to add that allows HTML: (Description)

Code:

<img src="/urlofimage" alt="" style="float:left" class="hover">

Add this inside your CSS: ACP >> Display >> Colors >> CSS

Code:

.hover:hover {
filter: alpha(opacity=50);
-moz-opacity: 0.65;
opacity: 0.55;
}
.hover {
filter: alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 1.0;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}

[quote="Sir Chivas™"]Add this to any image you're going to add that allows HTML: (Description)

Code:

<img src="/urlofimage" alt="" style="float:left" class="hover">

what should I write in alt " "?

That's my web, I want this to all the banners http://testforfuture.motionforum.net/

Another question also, is it possible to make for all the banners of all sections a glow effect that appears when a new message is posted there?

Hi, is it possible to make

Code:

<img src="/urlofimage" alt="" style="float:left" class="hover">

into

Code:

<img src="/urlofimage" alt="" style="float:center" class="hover">

or

Code:

<img src="/urlofimage" alt="" style="float:none" class="hover">

or should we just add

Code:

<div style="text-align: center;">

before the img tags?!

Also, how to replace links into images (or rather make images to act as links) as seen on that forum ?

Float only works with property, left, right and none. Center is invalid.



And for moi, if you want an image to use hover, just add this inside the image tag:

Code:

class="hover"

Example:

Code:

<img src="linkoftheimage" alt="" class="hover" />

Don't mind the alt, it's nothing.
You can just remove the alt if you want to.

Alright, got it all to work in this format

Code:

<a href="INSERTNAVIGATIONLINK" target="_blank"><div style="text-align: center;"><img src="IMGLINK" class="hover">
</a>

Text align may change the position of the image to the center, which is good since hover option didn't work properly for me (I don't want images on the left side).

Ty

Ok, thanks, I got the hover effect!

Now what about my other question, is it possible to make for all the banners of all sections a glow effect that appears when a new message is posted there?

Here I post a post more or less an example of what I'm talking about



On the left picture is a simple section with no new posts, and when a new post or message is written there, I would like it to have a glow effect like that one on the right. Is it possible to do that?

I think that's not possible. :S