Оформление изображений на CSS3
Необходимо сделать вот такое оформленное фото с помощью CSS
Решение
Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.
Добавление динамики
Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.
После применения мы получим следующий результат:
________
.morphing-glowing .image-wrap {
-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}
.morphing-glowing .image-wrap:hover {
-webkit-box-shadow:
0 0 20px rgba(255,255,255,.6),
inset 0 0 20px rgba(255,255,255,1);
-moz-box-shadow:
0 0 20px rgba(255,255,255,.6),
inset 0 0 20px rgba(255,255,255,1);
box-shadow:
0 0 20px rgba(255,255,255,.6),
inset 0 0 20px rgba(255,255,255,1);
-webkit-border-radius: 60em;
-moz-border-radius: 60em;
border-radius: 60em;
}