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.

Avatar Hover Effect (CSS)

Go down

Solved Avatar Hover Effect (CSS)

Post by Nemesis of Love on April 25th 2014, 1:05 am

I'd like to add an avatar hover effect. I was thinking maybe a color<->bw. If you have any other suggestions and/or can help me with the code it would be very much appreciated.


Last edited by Nemesis of Love on April 25th 2014, 9:10 am; edited 1 time in total
avatar
Nemesis of Love
Forumember

Female Posts : 31
Reputation : 4
Language : Greek, English
Location : Westeros

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Sir Chivas™ on April 25th 2014, 1:35 am

Hi,

Forum Version is phpBB3?

Regards,
Sir Chivas.
avatar
Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6810
Reputation : 433
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Nemesis of Love on April 25th 2014, 1:42 am

Yeah  Smile 
avatar
Nemesis of Love
Forumember

Female Posts : 31
Reputation : 4
Language : Greek, English
Location : Westeros

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Pizza Boi on April 25th 2014, 7:12 am

Hi Very Happy

Hmm... I don't know exactly what kind of hover effect you want but I decided to make one on my own. If yours is phpBB3, this should help your problem:

Code:
.postprofile dt img:hover {
padding: 5px;
background-color: #F00;
transition: 400ms;
border: 1px dashed #000;
border-radius: 5px 5px 5px 5px;
display: inline-block;
}

Add that to AP < Display < Colors < Stylesheet. You can even change the values I presented for it.

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

Solved Re: Avatar Hover Effect (CSS)

Post by Ange Tuteur on April 25th 2014, 8:52 am

Hello,

To make the avatar gray on hover you can do something like :
Code:
.postprofile dt img:hover {
  filter:url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg>#grayscale');
  filter:gray;
  -webkit-filter:grayscale(100%);
}


Note : That placing the above in the default stylesheet will cause auto corrections breaking the effect for Firefox. You should place it in a widget, or the announcements module. It should be placed in style tags like :
Code:
<style>
.postprofile dt img:hover {
  filter:url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg"><filter id="grayscale"><feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0"/></filter></svg>#grayscale');
  filter:gray;
  -webkit-filter:grayscale(100%);
}
</style>
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Nemesis of Love on April 25th 2014, 9:03 am

@Ange Tuteur thank you so much! that was exactly what i had in mind! Do you happen to know though why the auto corrections happen? Because i also tried other codes and they were... auto-corrected.

@Pizza Boi thank you as well because even though i was interested in the other effect i might use this one too.
avatar
Nemesis of Love
Forumember

Female Posts : 31
Reputation : 4
Language : Greek, English
Location : Westeros

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Ange Tuteur on April 25th 2014, 9:06 am

The stylesheet edits out any HTML tags to prevent common errors by users. It is not a good Idea in my opinion as the svg filter users HTML in a string to achieve the grayscale effect.
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Nemesis of Love on April 25th 2014, 9:09 am

oh, okay... thanks again Smile
avatar
Nemesis of Love
Forumember

Female Posts : 31
Reputation : 4
Language : Greek, English
Location : Westeros

Back to top Go down

Solved Re: Avatar Hover Effect (CSS)

Post by Ange Tuteur on April 25th 2014, 9:11 am

You're welcome Smile

Topic solved and archived
avatar
Ange Tuteur
Forumaster

Male Posts : 13187
Reputation : 2895
Language : EN10, FR5
Location : Macungie, PA

http://fmdesign.forumotion.com

Back to top Go down

Back to top


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