Нужно свечение изображения при наведении с помощью Lightbox

Я искал последние пару дней и не смог найти ничего полезного. Я пытаюсь получить тот же эффект свечения, который используется на демонстрационной странице Lightbox ( http://lokeshdhakar.com/projects/lightbox2/ ). Я хочу сделать так, чтобы при наведении курсора на миниатюры возникало такое же анимированное свечение. Но я не могу найти ничего, что действительно помогает. Кто-нибудь знает, как они этого добились?


html css hover lightbox glow
person Blanke    schedule 29.04.2014    source источник
comment
Вы про синий контур на картинках?   -  person Barbara Laird    schedule 30.04.2014
comment
Похоже, это просто переход цвета фона элемента ссылки вокруг изображения от белого к синему — он отображается в области отступов ссылки и ограничивается закругленными углами по краям с помощью радиуса границы. (ИМХО, из-за чего это выглядит довольно дешево. Я думаю, что другие способы достижения чего-то подобного, например, размытая тень блока, могли бы добиться этого эффекта гораздо лучше.)   -  person CBroe    schedule 30.04.2014
comment
Дело в том, что когда я пытался добавить тень блока, по какой-то причине она никогда не была вокруг фактического изображения, а появлялась, начиная с одного угла изображения, и имела совершенно другие размеры.   -  person Blanke    schedule 30.04.2014

Ответы (1)


arrow_upward
0
arrow_downward

Вот что они сделали:

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

person Barbara Laird    schedule 29.04.2014
comment
Большое спасибо! Я заставил его работать. Спасибо за помощь! - person Blanke; 30.04.2014