html - 需要使用灯箱悬停时图像发光

Question

这几天我一直在寻找，但没有找到任何有用的东西。我正在尝试获得与 Lightbox 演示页面 ( http://lokeshdhakar.com/projects/lightbox2/ ) 上使用的相同的发光效果。我想做到这一点，当我将鼠标悬停在缩略图上时，会出现同样的动画效果。但我找不到任何真正有用的东西。有谁知道他们是如何做到这一点的？

Answer 1

这是他们所做的:

.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
}

重要的部分是背景颜色和过渡。

http://jsfiddle.net/DjXn9/