Problems with image shadows and borders

ivegotyourpicture.com · October 10, 2015

I'm having some problems getting the borders and shadows to work like I want them to. I've found several posts about doing this, and have tried several combinations, but can't get it just right.

Here's what I'm trying to accomplish (I'm using the SmugMug Theme):

when viewing images in the gallery, I want a border around each thumbnail and the main image.
when the mouse is hovered over the main image, I want a shadow to appear
when viewing images of Galleries and Folders I want a shadow around each image with and without hover (different colors)

I've been able to get some of these things to work independently of each other, but can't get them to work together.

And, when I add the shadow to the gallery and folder images, they also are appearing on the thumbnails, but not in the shape of the thumbnail images. The shadow is appearing as a square, regardless of the shape of the thumbnail image (I'm using "Auto" for Thumbnail size).

Below is the code I've been working with. If I remove the border code (or put it below the shadow code), the shadows work (except the thumbnail shadow is wrong as I mention above).

Can someone help me work through the conflicts, and also figure out why the shadows on the thumbnails is wrong (i'm ok with not having shadows on the thumbnail and only the border; but would accept the shadows if they worked correctly).

My site is www.ivegotyourpicture.com

Thanks!

/*-----------Begin Add a border around the thumbnails and photo    ------------ */
/* Add 1 pixel border around the thumbnails and photos */
.sm-user-ui .sm-gallery-smugmug .sm-image {
  border: 1px solid #E3E3E3;
  padding: 0px;
}
/* Set the overflow of the images to be visible so the border actually displays properly */
.sm-user-ui .sm-gallery-smugmug .sm-tile-content {
  position: relative;
  display: block;
  overflow: visible;
/*-----------End Add a border around the thumbnails and photo   ------------ */
  
/* Begin Shadows */
.sm-tile .sm-tile-content:hover {
   box-shadow: 5px 5px 3px #FFF !important;
}
.sm-tile .sm-tile-content:hover {
   box-shadow: 5px 5px 3px #888 !important;
}

/* End Shadows */

Allen · October 10, 2015

We can not see your NewSmug while it is in sandbox, only the Legacy one until you do a final publish.

Lille Ulven · October 10, 2015

As Allen said we cannot see your site ivegotyourpicture.com, but this is the code that I added on entire site level that makes it work on my site. So maybe it does so for you too, or at least gives you a better starting point

/* frame for photos in gallery */
.sm-tile-photo .sm-tile
 {
   border: 2px solid white !important; /*#89a0de*/
   outline: 6px solid #2b2c2f !important; 
   /*margin: 1px*/
   margin: 8px !important;
   /*outline-color: white !important;*/
 }

 .sm-tiles-list .sm-tile {
   border: solid white !important;
   outline: solid #2b2c2f  !important;
 }
  
/* frame for photos in lightbox */
.sm-lightbox .sm-lightbox-image, .sm-lightbox .sm-lightbox-image-icon  {
    position: center !important;
    border: 2px solid white !important; /*#89a0de*/
    outline: 6px solid #2b2c2f  !important; 
  }
  
/* Special settings so that thumbnails that are hovered over get a special frame color */
.sm-tiles-list .sm-tile-content:hover
, .sm-tiles-list .sm-tile-content:focus{
  box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
  outline: 6px solid #89a0de !important;
  opacity: 0.9;
  -webkit-transition: all 0.5s ease-in;
  
  transition: all 0.5s ease-in;
}

.sm-tiles-list .sm-tile-content:active {
  box-shadow: 2px 3px 5px rgba(0,0,0,0.2);
  outline: 6px solid red !important;
  opacity: 0.9;
  -webkit-transition: all 0.5s ease-in;
  
  transition: all 0.5s ease-in;
}

Good luck

Lille Ulven

Allen · October 10, 2015

This is the major problem with NewSmug. Completely losing what thumb you're on.
http://www.dgrin.com/showthread.php?t=253474

Lille Ulven · October 11, 2015

Allen as much as I agree with you...could you add this to the feature-request site as leftquark indicated in your original thread, that way I would at least be able to vote for it (once I get some free votes again

) and who knows maybe it would even get fixed soon.
I do get a certain feeling that the subform for feature requests really is not about smug implementing them but more about users discussing them in more detail than what is done on the feature request page...

Have a great weekend

Lille Ulven

ivegotyourpicture.com · October 12, 2015

Thanks, Lille. I like the transition, but I'm still having the same problem with the thumbnails.

Here's what it looks like with my code (a shadow on hover). You can see that the shadow isn't the same size as the image. All the images are different sizes, because I used "Auto" for thumbnail sizes.

Here's the same image with your code... you can see the same problem. The border is square, but the image isn't.

I've got the shadow working like it want in the other locations, but can't get this one figured out.

Problems with image shadows and borders

Comments