hover

[Valentinka.solar]

Доброго времени суток форумчане.

Возникла следующая проблема. Как при наведении на картинку сделать вот такой вот эффект http://s004.radikal.ru/i207/1312/af/e2ecefa7e75d.png ? Что бы у картинки появлялся бордер и размытие.  Пробовала просто при hover через background накладывать этот фон на картинку, но он ложился под нее.

[Akkianu]

А если z-index прописать?

[npofopr]

:hover {ouline: 2px solid #000;}

:hover:before {content:' ', position: absolute; background: url(pic) no-repeat 0 0; width: 10px; height: 10px; left: 50%; top: 50px; margin: -5px 0 0 -5px;}

 

Ну или да, ложить картинку с position: absolute; и opacity:0; а при ховере делать ей opacity: 1;

[Radiocity]

Оборачиваете изображение inline объектом (например, ссылкой), при наведении добавляете :before, который показываете перед оберткой. http://jsfiddle.net/5utrF/

Решение с размытием легко найти в интернете. Все зависит от браузеров, под которые верстаете.

Edited December 11, 2013 by Radiocity