Rounding corners on outline

RKnecht

I'm using "outline" to highlight my thumbnails on hover, and I can't figure out a way to round the corners to match the image borders. Any ideas?

http://www.richknechtphotography.com/Gallery-Index/Dog-Agility-2014/Flexible-Flyers-CPE-February/Saturday-Standard-Levels-45-C/i-Gs72SgF

phaserbeam

RKnecht wrote: »

I'm using "outline" to highlight my thumbnails on hover, and I can't figure out a way to round the corners to match the image borders. Any ideas?

http://www.richknechtphotography.com/Gallery-Index/Dog-Agility-2014/Flexible-Flyers-CPE-February/Saturday-Standard-Levels-45-C/i-Gs72SgF

I applied some extra code to remove outline and add some rounded borders...
.
.
.
EDIT: This may work a little bit better:

.sm-user-ui .sm-gallery-smugmug .sm-tile-overlay:hover {
    outline:none;  
}
.sm-user-ui .sm-gallery .sm-tile:hover .sm-tile-overlay {
   border: 3px solid #1e90ff;
   border-radius:8px;
   margin:-2px;
}
.sm-user-ui .sm-gallery .sm-tile-photo a:hover:after {
   border: 4px solid #1e90ff;
   margin-right:-5px;
   padding:2px!important;
}

EDIT2: I applied some of your code and made some changes to my own site, check the changes live here...:

.sm-gallery-smugmug .sm-tile-overlay:hover {
    outline:none;  
}
.sm-gallery-smugmug .sm-tile:hover .sm-tile-overlay {
   border: 3px solid #888888;
   border-radius:8px;
   margin:-3px;
}
.sm-gallery-smugmug .sm-tile-photo a:hover:after {
   border: 4px solid #888888;
   border-radius:0px 0px 5px 5px;
   margin-right:-5px;
   padding:2px!important;
}
.sm-gallery-smugmug .sm-tile-photo a:hover:after {
    content: 'Click to Enlarge' !important;
    z-index: 9999 !important;
    position: absolute;
    bottom: -2px;
    left: 0px; 
    right:3px;
    font-size:0.7em;
    text-align:center;
    font-weight: bold;
    background-color:#888888;
    color: rgba(255, 255, 255, 0.9);
    padding: 5px 5px 5px 5px; /* top right bottom left */
    overflow: visible;
}
.sm-gallery-smugmug .sm-gallery-image .sm-tile-content:hover {
    font-size:1.3em!important;
}

Thank you much for this great idea...

RKnecht

That looks great. I'll have to give it a go on my site when I get back.

Just applied it to my site and it works just fine