0

I have been looking for the past couple of days and have not been able to find anything helpful. I am trying to get the same glow effect that is used on the Lightbox demo page ( http://lokeshdhakar.com/projects/lightbox2/ ). I want to make it so that when I hover over my thumbnails, the same kind of animated glow happens. But I cant find anything that really helps. Does anyone know how they achieved this?

Blanke
  • 1
  • Are you talking about the blue outline on the images? – Barbara Laird Apr 29 '14 at 22:42
  • That seems to be a simply transition of the background-color of the link element around the image from white to a blue – it shows within the padding area of the link and is restricted to rounded corners at the edges by a border-radius. (Which makes it look quite cheap IMHO. I’d think other ways of achieving something similar, like a blurred box-shadow, could achieve this effect quite better looking.) – CBroe Apr 29 '14 at 22:52
  • The thing is, when I did try to add a box shadow, for some reason it would never be around the actual image, but it would appear starting in one corder of the image, and be totally different dimensions. – Blanke Apr 29 '14 at 22:55

1 Answers1

0

Here's what they did:

.example-image-link {
    display: inline-block;
    padding: 4px;
    margin: 0 0.5rem 1rem 0.5rem;
    background-color: #fff;
    line-height: 0;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    -webkit-transition: background-color 0.5s ease-out;
    -moz-transition: background-color 0.5s ease-out;
    -o-transition: background-color 0.5s ease-out;
    transition: background-color 0.5s ease-out
}

.example-image-link:hover {
    background-color: #4ae;
    -webkit-transition: background-color 0;
    -moz-transition: background-color 0;
    -o-transition: background-color 0;
    transition: background-color 0
}

.example-image {
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px
}

The important bits being the background-color and the transition.

http://jsfiddle.net/DjXn9/

Barbara Laird
  • 12,599
  • 2
  • 44
  • 57