Resource icon

Smilie Hover Effects

Overview Updates (2) Reviews (1) Discussion
M

Matthew Hawley

Well-known member
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...​
Click to expand...
Read more about this resource...
 
Tracy Perry

Tracy Perry

Well-known member
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.
 
it_

it_

Member
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.
 
MajesticMonkey

MajesticMonkey

Member
Matthew Hawley said:
What do you mean? It works with all smiley images.
Click to expand...
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

Shelley

Well-known member
MonkeyProductions said:
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?
Click to expand...
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;}
 
MajesticMonkey

MajesticMonkey

Member
Shelley said:
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;}
Click to expand...
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

Shelley

Well-known member
MonkeyProductions said:
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.
Click to expand...
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.
 
You must log in or register to reply here.
Top