Ell*_*ger 3 css image border hover
我几乎不敢问这个问题,因为它似乎是一个显而易见的问题,但我找不到一个明确的答案,所以冒着玷污我不存在的声誉的风险,这里有:
有没有办法在悬停时向图像添加扩展的CSS内边框,而不影响图像的大小？
这是我的代码尽可能接近我自己:
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.media_item_container img {
border: 3px solid #00205f;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-o-transition: all .3s ease;
-ms-transition: all .3s ease;
transition: all .3s ease;
}
.media_item_container img:hover {
border: 10px solid #00205f;
}
.media_item_container a
{
font-weight:bold;
color:#000;
text-decoration:none;
font-size:13px;
}
.media_item_container a:hover
{
color:#fff;
}
HTML
<body bgcolor="#999999">
<div class="media_item_container">
<div class="media_item_text">
<a href="#"><img src="http://lorempixel.com/output/business-q-c-158-158-5.jpg" width="158" height="158" class="media_item_thumb" />
<h3>E-Brochure: <em>Printable e-brochure</em></h3>
DOWNLOAD »</a>
</div>
</div>
</body>
只是试图确定是否有任何方法可以做到这一点,而不会随着边框大小的增加缩小图像(我基本上理解为什么会发生这种情况,我似乎无法自己提出解决方案).
我应该澄清,当我问是否有办法做到这一点,我认为必须有一些方法来做到这一点,但我很想知道是否有一个相对简单的方法.
非常感谢!
您可以使用轮廓而不是边框.
outline:3px solid red;
outline-offset:-3px; //keeping it inside
并悬停
outline:10px solid red;
outline-offset:-10px;
伙计，这是我想出的解决方案。不得不更改一些 HTML 和 CSS，但这是我的尝试。希望这对伴侣有帮助，干杯
\n\n\n\nHTML：
\n\n<body bgcolor="#999999">\n <div class="media_item_container">\n <div class="media_item_text">\n <a href="#">\n <div class="border" style="background: url(http://lorempixel.com/output/business-q-c-158-158-5.jpg);">\n </div>\n\n\n<h3>E-Brochure: <em>Printable e-brochure</em></h3>\n DOWNLOAD \xc2\xbb</a>\n\n </div>\n</div>\nCSS：
\n\n.border {\n -webkit-transition: all 500ms linear;\n -o-transition: all 500ms linear;\n -moz-transition: all 500ms linear;\n -ms-transition: all 500ms linear;\n -kthtml-transition: all 500ms linear;\n transition: all 500ms linear;\n width: 158px;\n height: 158px;\n}\n.border:hover {\n -webkit-box-shadow: inset 0px 0px 2px 10px #00205f;\n box-shadow: inset 0px 0px 2px 10px #00205f;\n}\n.media_item_container a\n{\n font-weight:bold;\n color:#000;\n text-decoration:none;\n font-size:13px;\n}\n.media_item_container a:hover\n{\n color:#fff;\n}\n