Add a Drop Shadow to Images on Hover - Aaron Meyers

Add a Drop Shadow to Images on Hover

There are a number of ways of giving the user feedback to which image they are on. Some people add a border around the images, other people make the photo transparent, or make it go from transparent to opaque. If you would like to add a drop-shadow to the image when the mouse hovers over it, use the following code.

For Gallery and Folder Images Only

This code applies to gallery and folder images only. It does not apply to the main image in SmugMug layout. This is the recommended code. Add the following CSS to your theme's Advanced CSS settings:
/* Add a drop shadow to gallery and folder images */ 
.sm-tiles-list .sm-tile .sm-tile-content:hover {
   box-shadow: 7px 7px 5px #888;
}

For All Images

The following code applies to all images, including the main image in SmugMug layout. Add the following CSS to your theme's Advanced CSS settings:
.sm-tile .sm-tile-content:hover {
   box-shadow: 7px 7px 5px #888;
}

For Thumbnails in SmugMug Layout

Add the following CSS to your theme's Advanced CSS settings:
/* Add a drop-shadow to the thumbnails in SmugMug Layout */
.sm-gallery-tilesnav .sm-tile .sm-tile-content .sm-tile-overlay {
  box-shadow: 7px 7px 5px #888;
}

See the original discussion on the dgrin forums.

Comments

Powered by SmugMug Log In