Navigation - How to Create Hover Text: Go to larger view or Lightbox

toddbuchanan · August 26, 2013

I have some clients who may not be as familiar with navigating a photo galllery to get to larger views: either getting to the larger thumbnail view in gallleries or from the larger view to the light box view (don't not necessarily want them going to the slide show since I want them to still see the tools at the bottom like the Lightbox has)...and for the sake of this post, lets just call these clients advanced in age or computer challenged....

So I was trying to figure out if I could either add a "Alt Text" or tooltip hover over the thumbnails and larger view (smugmug style gallery) that would be an Alt Text/tooltip on hover, or a hover tag that I could create that would say something like: "Click here to see larger view".

Either that or create a button below the larger view (in smugmug style gallery) that would say, "Click for larger view"

I have seen several hacks for right click notes, but my clients might not understand click on the image would make it larger (heck...it took me several days to realize you click on the larger preview to go to the light box!)

Below are a couple sample ideas:

Thanks

Todd
http://coroporteeventimages.smugmug.com

The Mechanic · August 26, 2013

Hello,

This should get you started

.sm-user-ui .sm-gallery-image a:hover:after {
content: 'Click On Image To Enlarge ' !important;
z-index: 9999 !important;
position: relative;
bottom: 50px;
left: 10px;
background-color: whitesmoke;
color: red;
padding: 20px;
border-radius: 6px;
overflow: visible;
}

toddbuchanan · August 26, 2013

The Mechanic wrote: »

Hello,

This should get you started

.sm-user-ui .sm-gallery-image a:hover:after {
content: 'Click On Image To Enlarge ' !important;
z-index: 9999 !important;
position: relative;
bottom: 50px;
left: 10px;
background-color: whitesmoke;
color: red;
padding: 20px;
border-radius: 6px;
overflow: visible;
}

Cool! Thank you! I knew I was close but I was just a little bit of on the right code...

So the only thing I don't know as much about is the z-index numbers...if I wanted to position it in lower right, what would that z-index be?

And thank you again!

toddbuchanan · August 26, 2013

Or is it just adjusting the padding/alignment that is more important....

toddbuchanan · August 26, 2013

I tweaked it a bit to mirror my site with some transperancy so it is more subtle...

.sm-user-ui .sm-gallery-image a:hover:after {
content: 'Click Image To Enlarge ' !important;
z-index: 9999 !important;
position: relative;
bottom: 30px;
left: 10px;
background-color: rgba(0, 0, 0, 0.4);
color: #ffffff;
padding: 3px;
border-radius: 3px;
overflow: visible;
}

Thank you again....

brandofamily · August 26, 2013

tried playing with the code to make the thumbs have a hover... no luck yet though. I tried using the class info from the round corners stuff.

toddbuchanan · August 26, 2013

brandofamily wrote: »

tried playing with the code to make the thumbs have a hover... no luck yet though. I tried using the class info from the round corners stuff.

I tried adding the class for the thumbs too but like you no luck..I'm assuming the position/size cause a problem...would be nice to have though....something simple like the small tools or download alt text...

brandofamily · August 26, 2013

The Mechanic wrote: »

Hello,

This should get you started

.sm-user-ui .sm-gallery-image a:hover:after {
content: 'Click On Image To Enlarge ' !important;
z-index: 9999 !important;
position: relative;
bottom: 50px;
left: 10px;
background-color: whitesmoke;
color: red;
padding: 20px;
border-radius: 6px;
overflow: visible;
}

Added code w/ the tweeks, but when it appears it's pushing the nav and comment box down.

brandofamily · August 26, 2013

position: absolute;

seems to make it work better... but I'm not sure that's a good idea or not.

brandofamily · August 26, 2013

Got them to both to work on my site... had to do the position absolute though...

/*Hover Notice on SM Gallery Thumb Image*/
.sm-user-ui .sm-tile-photo a:hover:after {
content: 'Click to Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 0px; 
font-size:10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 10px;
overflow: visible;
} 

/*Hover Notice on SM Gallery Main Image*/
.sm-user-ui .sm-gallery-image a:hover:after {
content: 'Click On Image To Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 6px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 25px;
overflow: visible;
}

Sample Gallery: http://www.brandolinoimaging.com/Image-Galleries/Sports-Images/High-School-Softball/LWE-Freshmen-Softball-2011/i-rk47fnS

brandofamily · August 26, 2013

Now I need to make it fade in-out slower

dunno

scratch

toddbuchanan · August 26, 2013

brandofamily wrote: »

Now I need to make it fade in-out slower dunnoscratch

Sweet! Nice job...bonus points for styling it...I'm trying to see if I can find some sort of web kit transition that might work but I know just enought to be dangerous....

brandofamily · August 26, 2013

toddbuchanan wrote: »

Sweet! Nice job...bonus points for styling it...I'm trying to see if I can find some sort of web kit transition that might work but I know just enought to be dangerous....

Had to add a bit... .sm-gallery to keep the effect on the smugmug style only...

/*Hover Notice on SM Gallery Thumb Image*/
.sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
content: 'Click to Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 0px; 
font-size:10px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 10px;
overflow: visible;
}

If you want to add the text to a multiple image box in collage style change the 1st line to...

.sm-user-ui .sm-page-widget-images .sm-tile a:hover:after

and tweek to fit...

If using both w/ different styling you need to tweek 1st line for main image code also..

/*Hover Notice on SM Gallery Main Image*/
.sm-user-ui .sm-gallery .sm-gallery-image a:hover:after {
content: 'Click On Image To Enlarge ' !important;
z-index: 9999 !important;
position: absolute;
bottom: 0px;
left: 6px;
background-color: rgba(0, 0, 0, 0.7);
padding: 6px;
border:solid 2px #8f7b62;
border-radius: 25px;
overflow: visible;
}

leftquark · August 27, 2013

For whatever reason the code was making the "Click to Enlarge" show up on mobile devices at all times. I'm not sure why it did this since there's really no way to "hover" but it was distracting from displaying the images. There's code to do certain CSS based on screen size so I used the code for non-mobile device sized screen's to limit this to desktop/laptop screens only:

/* For Desktops and laptops only (do not do on mobile devices)
   Hover Notice on SM Gallery Thumb Image */
[COLOR="Red"]@media only screen and (min-width : 1224px) {[/COLOR]
  /*Hover Notice on SM Gallery Thumb Image*/
  .sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
    content: 'Click to Enlarge' !important;
    z-index: 9999 !important;
    position: absolute;
    bottom: 0px;
    left: 0px; 
    font-size:10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: rgba(255, 255, 255, 0.6);
    padding: 3px 5px 3px 5px; /* top right bottom left */
    border:solid 1px #595959;
    overflow: visible;
  }
[COLOR="red"]}[/COLOR]

Note: I've modified the look slightly to fit my theme (smaller border, different colors, smaller padding , square corners, etc)

brandofamily · August 27, 2013

The main image and collage code kinda works in older IE too... styling does not show up. But the thumb code does not work in older IE. Not sure why.

Navigation - How to Create Hover Text: Go to larger view or Lightbox

Comments