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)

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

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.

Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
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

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

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>

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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.

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.

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
Language : EN10, FR5
Location : Pennsylvania

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

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

Ange Tuteur
Forumaster

Male Posts : 13028
Reputation : 2704
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