• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Smilie Hover Effects

Matthew Hawley

Well-known member
#1
Matthew Hawley submitted a new resource:

Smilie Hover Effect - Make those smilies hover!

Overview
So here I will show you how to put this certain smilie hover effect on your forum. Its quite simple actually.

View attachment 52673

1) Go to EXTRA.css and add this:
Code:
img.mceSmilieSprite:hover { opacity: 1; transition: opacity .15s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out;}
img.mceSmilieSprite { opacity: 0.5; }
If you like this resource don't forget to rate and like it!

Please consider a...​
Read more about this resource...
 

Tracy Perry

Well-known member
#3
Works fine with the sprite sheets, but if you have any animated GIF's (or any not listed in the sprite sheet) it will not work. It will be a simple edit to the CSS, but right now I don't have time to check to see what needs to be changed.
 
#6
Doesn't work for me too, I'm using a seperate Zombie Smilies Pack from Shelley (with no CSS)... too bad; I really like the zoom effect.
 
#10
What do you mean? It works with all smiley images.
I have added Shelley's extended smiley pack and in the redactor it doesn't hover with the opacity like the original ones.
All the basic ones that come with xF do - the added ones don't.

EDIT: I think it's because @Shelley 's ones aren't in a sprite, whereas the original ones are. Anyone know a fix for this?
 

Shelley

Well-known member
#11
I have added Shelley's extended smiley pack and in the redactor it doesn't hover with the opacity like the original ones.
All the basic ones that come with xF do - the added ones don't.

EDIT: I think it's because @Shelley 's ones aren't in a sprite, whereas the original ones are. Anyone know a fix for this?
The following should work both for sprites and individual images.

Code:
.redactor_smilies img.mceSmilieSprite, .redactor_smilies li img {opacity: 0.5;}
.redactor_smilies img.mceSmilieSprite:hover, .redactor_smilies li img:hover {
  opacity: 1;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -moz-transition: all 0.3s ease-in-out 0s;
  -transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;}
 
#12
The following should work both for sprites and individual images.

Code:
.redactor_smilies img.mceSmilieSprite, .redactor_smilies li img {opacity: 0.5;}
.redactor_smilies img.mceSmilieSprite:hover, .redactor_smilies li img:hover {
  opacity: 1;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -moz-transition: all 0.3s ease-in-out 0s;
  -transition: all 0.3s ease-in-out 0s;
  -webkit-transition: all 0.3s ease-in-out 0s;}
Thank you so much @Shelley,
I truly apologize for all of the question after an accident a couple of months ago my memory is shocking and so I have to learn all this stuff again from the beginning so I apologize for all the basic questions.
 

Shelley

Well-known member
#13
Thank you so much @Shelley,
I truly apologize for all of the question after an accident a couple of months ago my memory is shocking and so I have to learn all this stuff again from the beginning so I apologize for all the basic questions.
Don't ever apologise for asking something. If I'm capable of answering it then I really don't mind helping. :) hopefully that works for you, let me know if it does work out for you.