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.

How to make color effect when pointing to some banner

View previous topic View next topic Go down

How to make color effect when pointing to some banner

Post by moi_lolito on March 28th 2013, 4:53 pm

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 Smile

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by Sir Chivas™ on March 28th 2013, 4:58 pm

Hi,

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by moi_lolito on March 28th 2013, 5:03 pm

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.

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by Sir Chivas™ on March 28th 2013, 5:15 pm

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



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6756
Reputation : 428
Language : English, Spanish, and French
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by moi_lolito on March 31st 2013, 9:23 am

[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?



moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by Raziel21 on March 31st 2013, 11:04 pm

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 ?

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by E-Mark on April 1st 2013, 1:58 am

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



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.

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.com/

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by Raziel21 on April 1st 2013, 4:04 am

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

Raziel21
Forumember

Male Posts : 86
Reputation : 0
Language : Serbian, English, Russian, Italiano, Espanol
Location : Belgrade, Serbia

http://mizuchi.forumotion.com/forum

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by moi_lolito on April 1st 2013, 4:12 am

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?

moi_lolito
Forumember

Posts : 92
Reputation : 1
Language : English

Back to top Go down

Re: How to make color effect when pointing to some banner

Post by E-Mark on April 1st 2013, 4:24 am

I think that's not possible. :S

E-Mark
Active Poster

Male Posts : 1389
Reputation : 164
Language : English, Tagalog
Location : Republic of the Philippines

http://coding-spot.darkbb.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