Image Spinner

[Felix2]

Add to css_additional.css

/* Start Image Spinner */
img {
    -webkit-transition: all 0.5s ease 0s;
 -moz-transition: all 0.5s ease 0s;
 -o-transition: all 0.5s ease 0s;
 -ms-transition: all 0.5s ease 0s;
 transition: all 0.5s ease 0s;
 cursor:pointer;
 }

 img:hover {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
/* End Image Spinner */

[MokeyII]

How would you Turn this off for your Logo and Post's Images?

[Felix2]

Well, mine spin, so I haven't quite worked that out.
One might set it to only work on say JPG images, and then make your logo a PNG. But that wouldn't do much good on posts as those are usually JPG.
Could try inspecting the Logo and Post elements and then add an exception to the style.
Hasn't really been any issue on my test sites. I will think on it when its not 4AM.

[MokeyII]

Well, mine spin, so I haven't quite worked that out.
One might set it to only work on say JPG images, and then make your logo a PNG. But that wouldn't do much good on posts as those are usually JPG.
Could try inspecting the Logo and Post elements and then add an exception to the style.
Hasn't really been any issue on my test sites. I will think on it when its not 4AM.

Thanks

[Felix2]

Okay. Had a chance to look into this.
I wanted to apply the :Not(X1,X2) and exclude those images, but it won't work.
The reason being that Not relies upon CLASS values and the Logo for example has no IMG CLASS specified.
The logo image is included within a <DIV with a CLASS of .site-logo
As such, since I can't exclude, the reverse must be done. Target specific image classes.
Replace the code

   img:hover {

with

 img[class="bbcode-attachment thumbnail"]:hover {

This will spin only images that are attachments displayed as thumbnails. If the image is clicked, no longer thumbnail mode, it will no longer spin.
As the class is targeted, all other image classes will be ignored, which means the logo and all other images will not spin.
You can change the class to something that better suits you or add others.
Hope this helps.
Keep in mind, this depends upon the <IMG having a CLASS value set. Images with no CLASS can not be targeted or :NOT targeted.

[Felix2]

Here is an updated example. It will spin all attached image thumbnails, and if you have a gallery, it will spin the gallery thumbnails, but not the LiteBox or full size images.
All other images will be excluded from spinning.

/* Start Image Spinner */
 img {
    -webkit-transition: all 0.5s ease 0s;
 -moz-transition: all 0.5s ease 0s;
 -o-transition: all 0.5s ease 0s;
 -ms-transition: all 0.5s ease 0s;
 transition: all 0.5s ease 0s;
 cursor:pointer;
 }

 img.bbcode-attachment.thumbnail:hover {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }

 img.b-gallery-thumbnail-list__thumbnail:hover {
 -webkit-transform: rotate(360deg);
 -moz-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 transform: rotate(360deg);
 }
/* End Image Spinner */

[glennrocksvb]

Why not use class selectors using dots in the class name instead of using attribute selectors?

This:

 img[class="bbcode-attachment thumbnail"]:hover

is the same as:

img.bbcode-attachment.thumbnail:hover

Well not exactly the same as the first one will only match if img has exactly class="bbcode-attachment thumbnail" attribute in exactly the same order and has those classes only.
While the second will match img with class of bbcode-attachment and thumbnail but the classes don't have to be in the same order.

The second is the better option because if later on vB adds another class to the img tag, for example, class="bbcode-attachment thumbnail h-margin-right-xl", then the first rule will not match anymore while the second will still work.

[Felix2]

Nice catch there Glen!
I've updated the second example to include this revision of yours.

[Felix2]

One might also want to add these.

User Avatars

 a.avatar:hover {

Big Avatars, like the ones used inside posts.

 a.b-avatar:hover {

Smilies

 img.inlineimg:hover { {