Оформление изображений на CSS3

Необходимо сделать вот такое оформленное фото с помощью CSS

Решение

Чтобы все свойства работали корректно и во всех браузерах, необходимо использовать изображение в качества фона.

Добавление динамики

Для добавления динамики нужно использовать небольшой jQuery скрипт, который будет оборачивать исходное изображение в тег span со стилем image-wrap. Так же применение скрипта сделает наше исходное изображение фоновым и задаст его ширину и высоту.


$(document).ready(function(){
$("img").load(function() {
$(this).wrap(function(){
return '';
});
$(this).css("opacity","0");
});
});


После применения мы получим следующий результат:




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