Border для Img

termoplus · May 7, 2009

Нужно сделать типа галереи и чтобы при наведении курсора появлялась рамка в 3 пикселя. Можно задать обычной картинке 3 пик. цвета фона а при наведении (:hover) просто поменять цвет, но нужно чтобы у обычной картинки была рамка в 1 пик. Простыми словами нужно чтобы при наведении курсора рамка в 1 пик. заменялась на 3 пик. без смещения остальных картинок.

спасибо

rash · May 7, 2009

Когда отображается однопиксельная рамка, задавайте margin: 2px, когда трехпиксельная - убирайте отступ совсем.

psywalker · May 7, 2009

Или ещё как вариант, можно задавать и убирать padding: http://psywalker.ru/img-padding/img.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table - Li</title>
<style type="text/css">
*{ margin: 0; padding: 0;}
 img { border: 1px solid #f00; padding: 2px; float: left;}
 img:hover { border: 3px solid #f00; padding:0;}
</style>
</head>
<body>
   <img src="4649.jpg" alt="" />
   <img src="43.jpg" alt="" />
   <img src="30.jpg" alt="" />
   <img src="179.jpg" alt="" />
   <img src="191.jpg" alt="" />
</body>
</html>

Lincky · May 7, 2009

предложенный с паддингами вариант самый рациональный!

rash · May 7, 2009

Так паддинг "оттолкнет" бордер. Разве это то, что нужно?

Разница только в том, где будет находиться однопиксельная граница, тут уже зависит от того, что нужно получить.

klierik · May 7, 2009

нужно чтобы при наведении курсора рамка в 1 пик. заменялась на 3 пик. без смещения остальных картинок.

.className a img { border: 1px solid #000; margin: 2px; }
.className a:hover img { border: 3px solid #000; margin: 0px; }

SelenIT · May 7, 2009

На крайняк можно при наведении делать маргин отрицательным.

Lincky · May 8, 2009

так, так, не подумал сразу, лучше margin

Sign In

Border для Img

Question

termoplus

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

rash

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

rash

Link to comment

Share on other sites

klierik

Link to comment

Share on other sites

SelenIT

Link to comment

Share on other sites

Lincky

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information