Smilie Hover Effects

[Matthew Hawley]

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:

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

 

[Matthew Hawley]

Matthew Hawley updated Smilie Hover Effect with a new update entry:

Reverse Effect

Added a reverse effect.

Read the rest of this update entry...

 

[Tracy Perry]

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.

 

[Matthew Hawley]

Matthew Hawley updated Smilie Hover Effects with a new update entry:

Zoom Effect

Added a zoom effect. Also re did the gif images so they look better.

Read the rest of this update entry...

 

[Gonanda]

@Matthew Hawley, this is DON'T work on .gif animated smilies and on 99 smilies from Shelley's Xenforo Extended Smilies 1h. sad, bad.

 

[it_]

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.

 

[Deepmartini]

@Matthew Hawley, this is DON'T work on .gif animated smilies and on 99 smilies from Shelley's Xenforo Extended Smilies 1h. sad, bad.

Is there a way to get it to worth with animated ones?

 

[MajesticMonkey]

Don't know if it can work but it is a shame if there isn't a way to do it using addon smiley packs.

 

[Matthew Hawley]

Don't know if it can work but it is a shame if there isn't a way to do it using addon smiley packs.

What do you mean? It works with all smiley images.

 

[MajesticMonkey]

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]

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.

.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]

The following should work both for sprites and individual images.

.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]

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.

 

[MajesticMonkey]

It works like a charm,
Thank you.