В материале создадим стильную рамку, что будет появляться вокруг картинки, так как такой эффект рамки строится при помощи всем известного свойства, как border, где мы будем добавлять к селектору img. Для того, чтоб рамка показывалась только тогда, когда курсор наведен на заданный элемент, а точнее на изображение, то здесь следует задействовать псевдоклассом :hover, где показано на demo странице.
HTML
Код
<img src="http://zornet.ru/_fr/83/9288013.jpg" alt="">
CSS
Код
img {
border: 2px solid transparent;
}
img:hover {
border-color: #577cc5;
border-radius: 8px;
}
Также есть возможность прописать класс и уже под него все выстроить в CSS.
Демонстрация
