How to do hover-- highlighted frame & drop shadow effect like thumbs at top of DGrin?

WinsomeWorks · October 28, 2015

Wondering if anyone knows how to get the effect seen at top of DGrin (the 4 thumbnails) in either a gallery (SmugMug style as well as Collage style) or a folder? The effect is that hovering produces a thin highlighted frame around the image, but drop shadow is always there. The ones above have drop shadow on 4 sides. Perhaps 2 or 3 sides would be better, but either way...

I would need to then take out my code that's causing images to go a little dark when hovered. I think the above look is more attraactive. Just managed to get a drop shadow & border on my homepage slideshow thanks to Hikin' Mike's customization, but this is a bit different.

Hikin' Mike · October 28, 2015

This will give you a white border on your gallery/folders and a dark gray border when hovered. It will also remove the opacity when hovered.

.sm-user-ui .sm-tiles .sm-tile-content {
    border: 1px solid #fff;
    }
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    border-color: #616161;
    }

WinsomeWorks · October 28, 2015

Cool, Mike (haven't tried yet)--- Didn't expect such a little snippet would do it! I'm thinking if I want the white border to be there only when hovered like here on the DGrin thumbs, and the gray shadow to be there all the time, I should maybe try this instead?

.sm-user-ui .sm-tiles .sm-tile-content {
   border-color: #616161; 
    }
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    border: 1px solid #fff;
    }

Hikin' Mike wrote: »
This will give you a white border on your gallery/folders and a dark gray border when hovered. It will also remove the opacity when hovered.
.sm-user-ui .sm-tiles .sm-tile-content {
    border: 1px solid #fff;
    }
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    border-color: #616161;
    }

Hikin' Mike · October 28, 2015

WinsomeWorks wrote: »
Cool, Mike (haven't tried yet)--- Didn't expect such a little snippet would do it! I'm thinking if I want the white border to be there only when hovered like here on the DGrin thumbs, and the gray shadow to be there all the time, I should maybe try this instead?
.sm-user-ui .sm-tiles .sm-tile-content {
	border: 1px solid #616161;
	box-shadow: 0px 0px 5px #000;
	}
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
	opacity: 1;
	border-color: #fff;
	}	
    

Yes. I forgot what colors D-Grin used when I posted this. I didn't add the drop shadow, but you can add that to this:

.sm-user-ui .sm-tiles .sm-tile-content {
	border: 1px solid #616161;
	box-shadow: 0px 0px 5px #000;
	}
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
	opacity: 1;
	border-color: #fff;
	}

WinsomeWorks · October 28, 2015

Mike, I understood that this part of it that you provided originally is the drop shadow; is that not right? If so, that part's just hard to see on my site because my theme is rather dark. Maybe I'd be better off trying a lighter grey or other color for it?

.sm-user-ui .sm-tiles .sm-tile-content {
	border: 1px solid #616161;
	box-shadow: 0px 0px 5px #000;
	}

Hikin' Mike · October 28, 2015

WinsomeWorks wrote: »
Mike, I understood that this part of it that you provided originally is the drop shadow; is that not right? If so, that part's just hard to see on my site because my theme is rather dark. Maybe I'd be better off trying a lighter grey or other color for it?
.sm-user-ui .sm-tiles .sm-tile-content {
    border: 1px solid #616161;
    box-shadow: 0px 0px 5px #000;
    }

Yes. The colors I picked are random colors. Use what ever colors you want.

WinsomeWorks · October 28, 2015

Hikin' Mike wrote: »

Yes. The colors I picked are random colors. Use what ever colors you want.

Ok, that's what I thought. I thought I was choosing something visible, but I can't really see the shadow on any of my pages. Maybe I'll have to try something even lighter... or darker... idk. Anyway, I love the white border-- I think it really sets off the thumbs nicely. The only place I saw a problem with it is when I saw the effect in a gallery that's set to "SmugMug Style" and has original thumbs. The white border stays square, & brings in some black to fill in the edges of the short side out to the square. Is there a way to make the white border cling to the actual edges of the original thumbs instead? I have some of both types of galleries on my site (or I did...in Legacy... trying to get some of them back now, as they all defaulted to a site-wide "Collage" style kinda by accident).

I also had some journal-style galleries which have disappeared. I just tried setting one back to "journal" & was happy to see even that one keeps the white borders-- excellent!!

Hikin' Mike · October 28, 2015

WinsomeWorks wrote: »

Ok, that's what I thought. I thought I was choosing something visible, but I can't really see the shadow on any of my pages. Maybe I'll have to try something even lighter... or darker... idk. Anyway, I love the white border-- I think it really sets off the thumbs nicely. The only place I saw a problem with it is when I saw the effect in a gallery that's set to "SmugMug Style" and has original thumbs. The white border stays square, & brings in some black to fill in the edges of the short side out to the square. Is there a way to make the white border cling to the actual edges of the original thumbs instead? I have some of both types of galleries on my site (or I did...in Legacy... trying to get some of them back now, as they all defaulted to a site-wide "Collage" style kinda by accident).

I also had some journal-style galleries which have disappeared. I just tried setting one back to "journal" & was happy to see even that one keeps the white borders-- excellent!!

Do you have a link showing the 'Smugmug Style Gallery'?

WinsomeWorks · October 28, 2015

Yup, here's one I just switched to SmugMug Style, & it's set to original thumbs http://www.winsomeworks.com/Nature/Seascape-Favorites/i-wLXtLhJ You can see the effect there.

Hikin' Mike wrote: »

Do you have a link showing the 'Smugmug Style Gallery'?

Hikin' Mike · October 28, 2015

Try this. Remove this:

.sm-user-ui .sm-tiles .sm-tile-content {
    border: 1px solid #676c81;
    box-shadow: 0 0 5px #000;
    }    
    
.sm-user-ui .sm-tiles .sm-tile-content:hover {
    border-color: #fff;
    opacity: 1;
    }

Add this instead.

.sm-user-ui .sm-tile-limit-both,    
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-tile-limit-both,
.sm-user-ui .sm-tile-overlay:hover {
    width: 98%
    }
    
.sm-user-ui .sm-image.sm-tile-portrait,
.sm-user-ui .sm-tile-overlay:hover {
    height: 98%;
    }    
    
.sm-user-ui .sm-image.sm-tile-portrait {
    width: auto;
    }    
    
.sm-user-ui .sm-tile-overlay:hover {
    border: 1px solid #fff;
    }    

.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    }

WinsomeWorks · October 28, 2015

Aw, thanks for working so hard on this, Mike! I sure wish I could report complete success, and that did fix the issue in galleries-- the original thumbs are working great now, as well as the square thumbs.

The only thing is, the code made the frame & shadow effect totally disappear from tiled folder and sub-folder displays, so now they aren't showing that nice effect at all. Also, some of the vertical folder images that are in a grid set to 4:3 ratio tile, such as here: http://www.winsomeworks.com/Travel have reverted to an original crop rather than keeping with the rest of the images' crop ratio 4:3. (see the image for the "Indiana" sub-folder, "Nepal" sub-folder & "Thailand" sub-folders). Hmmm... wish I could figure it out so you wouldn't hafta spend time on it, but I'm not brainy enough.

Hikin' Mike · October 28, 2015

Sorry about that. Try this, remove this:

.sm-user-ui .sm-tile-limit-both,    
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-tile-limit-both,
.sm-user-ui .sm-tile-overlay:hover {
    width: 98%
    }
    
.sm-user-ui .sm-image.sm-tile-portrait,
.sm-user-ui .sm-tile-overlay:hover {
    height: 98%;
    }    
    
.sm-user-ui .sm-image.sm-tile-portrait {
    width: auto;
    }    
    
.sm-user-ui .sm-tile-overlay:hover {
    border: 1px solid #fff;
    }    

.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    }

Add this instead:

.sm-user-ui .sm-tile-limit-both,    
.sm-user-ui .sm-tiles-grid .sm-tile-content,
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both,
.sm-user-ui .sm-tile-overlay:hover {
    width: 98%
    }
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait,
.sm-user-ui .sm-tile-overlay:hover {
    height: 98%;
    }    
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait {
    width: auto;
    }    
    
.sm-user-ui .sm-tile-overlay:hover,
.sm-user-ui .sm-tiles-grid .sm-tile-content:hover {
    border: 1px solid #fff;
    }    

.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    }

Hikin' Mike · October 29, 2015

I noticed you have a few double borders. Probably easier to remove the stuff I posted above:

.sm-user-ui .sm-tile-limit-both,    
.sm-user-ui .sm-tiles-grid .sm-tile-content,
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both,
.sm-user-ui .sm-tile-overlay:hover {
    width: 98%
    }
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait,
.sm-user-ui .sm-tile-overlay:hover {
    height: 98%;
    }    
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait {
    width: auto;
    }    
    
.sm-user-ui .sm-tile-overlay:hover,
.sm-user-ui .sm-tiles-grid .sm-tile-content:hover {
    border: 1px solid #fff;
    }    

.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    }

....and use this. I HOPE this works better.

.sm-user-ui .sm-tile-album .sm-tile-content,
.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both, 
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both,
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay:hover {
    width: 98%
    }
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait,
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay:hover {
    height: 98%;
    }    
    
.sm-user-ui .sm-gallery-smugmug .sm-image.sm-tile-portrait {
    width: auto;
    }    

.sm-user-ui .sm-tile-album .sm-tile-content:hover,    
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay:hover,
.sm-user-ui .sm-tiles-row-organic .sm-tile-content:hover {
    border: 1px solid #fff;
    }    

.sm-user-ui .sm-tiles .sm-tile-content:hover {
    opacity: 1;
    }

WinsomeWorks · October 29, 2015

No apology needed, Mike-- "Beggars can't be choosers". This isn't something I had before-- I could've kept it simple, maybe.

: All I can hope is that this is contributing to your education somehow, rather than mine.

So here's the lates, & I'll start with what's working: All the folder displays, where there are tiles of one size-- http://www.winsomeworks.com/browse or another--http://www.winsomeworks.com/Portfolio , the effect is working beautifully & looks perfect. And the ratios of those vertical images that were acting weird are fine now. I still haven't really seen the shadow effect (I kind of mis-spoke on that earlier) but I still haven't changed that color to be even lighter, so I still think that's just because of my dark site.

Anyway, here's where it's not as we planned, but I also don't mind if it needs to stay as is: In a collage-style gallery like this: http://www.winsomeworks.com/Arts-and-Crafts/Streets-and-Signs/Signs-of-the-Times/ , the thin frame is at least there; it just doesn't light up white when hovered. Same with this one: http://www.winsomeworks.com/Travel/Around-Asia/Asia-Unforgettable-Scenes/ Maybe that's because I have collage galleries set to show captions when hovered? (Whereas, in the Top Folder & Sub-folder displays where the hover is producing the correct white frame effect, I have it set to show titles of those folders or galleries all the time instead,) I just realized these effects could be confusing eachother? That's not a huge deal, either, cuz at least there's already one action going on when hovered.

**The view for SmugMug-Style galleries with original thumbs is the main one that needs fixing, like this one: http://www.winsomeworks.com/Nature/Seascape-Favorites/ As you can see, the frame is lighting up nicely white when hovered, but there's a 2nd frame around the original shape as well as a square shape at all times, & the space in-between the 2 frames is filling in with black. Actually, the whole image is also getting slightly lighter (less saturated) when hovered as well, which we didn't talk about inside galleries, but it really looks fine in a SmugMug style gallery, I'd say. That doesn't need fixing.

The view for SmugMug-Style galleries with square thumbs like this one http://www.winsomeworks.com/Art/Cascade-of-Colors/Golden-Glitters/ is very good. White frame lights up when hovered. As in the above gallery with orig thumbs, the image itself turns lighter on hovering as well, but again, I think that's fine in a gallery. Sorry so lengthy. Hope I've explained it OK. No rush, either...I have to be off my feet this week, so I'm in slo-mo. Wish I were photographing fall leaves-- hope the colors hang in there for a few.

Hikin' Mike · October 29, 2015

I'm getting ready to go to bed, but I noticed you didn't see (and change) this post above: http://www.dgrin.com/showpost.php?p=2014179&postcount=13

That should take care of it.

WinsomeWorks · October 29, 2015

Oh goodness, so silly that I didn't see that second fix, Mike. (I was probably falling asleep at computer!) Anyway, it's so close now-- looking perfectly great everywhere that the effect is happening..no issues. Smug-style galleries square & orig are great, folders showing feature photos for galleries great. I finally figured out that the only areas not showing the effect at all are Top Folders like http://www.winsomeworks.com/browse or http://www.winsomeworks.com/Travel where the display is showing a sub-folder feature image. Like if you scroll far down in that Travel Folder, there are a few featured photos for single galleries... those do show the effect. It's only if it's a Top folder displaying sub-folder feature images where the effect isn't happening.

Also if I change a gallery to display as Thumbnails style or Portrait-style Collage (which I'll be doing with some in near future) the thumbs lose the effect as well. I think Journal-style actually inherited the frame effect before, but doesn't now. That's not a concern though; it's OK as is. The frame looked good, but we wouldn't want journal-style to go transparent.

Hikin' Mike · October 29, 2015

WinsomeWorks wrote: »

Oh goodness, so silly that I didn't see that second fix, Mike. (I was probably falling asleep at computer!) Anyway, it's so close now-- looking perfectly great everywhere that the effect is happening..no issues. Smug-style galleries square & orig are great, folders showing feature photos for galleries great. I finally figured out that the only areas not showing the effect at all are Top Folders like http://www.winsomeworks.com/browse or http://www.winsomeworks.com/Travel where the display is showing a sub-folder feature image. Like if you scroll far down in that Travel Folder, there are a few featured photos for single galleries... those do show the effect. It's only if it's a Top folder displaying sub-folder feature images where the effect isn't happening.

Also if I change a gallery to display as Thumbnails style or Portrait-style Collage (which I'll be doing with some in near future) the thumbs lose the effect as well. I think Journal-style actually inherited the frame effect before, but doesn't now. That's not a concern though; it's OK as is. The frame looked good, but we wouldn't want journal-style to go transparent.

You keep longer hours than me....

!

I forgot about the folders, so just add this in red:

.sm-user-ui .sm-tile-album .sm-tile-content,
[COLOR=Red].sm-user-ui .sm-tile-folder .sm-tile-content,[/COLOR]
.sm-user-ui .sm-gallery-smugmug .sm-tile-limit-both, 
.sm-user-ui .sm-tiles-row-organic .sm-tile-content {
    border: 1px solid #676c81;
    }        

.sm-user-ui .sm-tile-album .sm-tile-content:hover,   
[COLOR=Red].sm-user-ui .sm-tile-folder .sm-tile-content:hover, [/COLOR]
.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay:hover,
.sm-user-ui .sm-tiles-row-organic .sm-tile-content:hover {
    border: 1px solid #fff;
    }

Yes, if you change to a different gallery style, we'll need to add more CSS.

WinsomeWorks · October 29, 2015

Very grateful for all the help!!
It's marvelous, Mike-- You're a wizard! Thank you SO much!

I really love how that effect sets everything off. I'm all about color, as you can see. You know, I replaced the shadow color again with an even lighter tint, and thought I still wasn't seeing it. But then realized that the shadow is simply fewer pixels than what I see here on DGrin & that's why I wasn't seeing it much, so I may just try 2px instead or something, and/or 3px on just the larger folder tiles. I'm not sure if it'll be good anyway with my darker bkgrd. We'll see. That part, I think I can tinker with on my own, as I basically get what most of the lines of code are doing.

I know in some of my displays, there's not room in-between images for much (shadow or anything). I'm planning to increase the space (margin) between the images & then there will be, but was hoping to find a way to do that for an entire folder rather than going into every single folder & sub-folder to change it.. yikes, otherwise it'll be a big task. Not every folder has the same size display images (I tried to use the largest I could depending how many sub-folders or galleries had to display) so idk if that makes it hard to change the margins in bulk, like in a whole Top-folder or Sub-folder.

Yes, all of my gazillions of galleries were re-set to Collage style in NewSmug, so I need to get around & change lots of them to Smug style or another one. Portrait collage for some folders is definitely one I'll use, but it'll be a few days probably 'til I get to it. As to my hours-- umm, yes, a musician-friend of mine wrote a song with the refrain, "I'm just an East Coast woman... livin' in West Coast time"!! Describes me to a T. Idk why I don't have more owl shots. Ok, time to get outside & see some fall color before it blows away!

How to do hover-- highlighted frame & drop shadow effect like thumbs at top of DGrin?

Comments