图像顶部的内边框

Question

我正在尝试在悬停时为图像添加顶部边框。边框应显示在图像的顶部（我的意思是在顶部的图像内），它不应该在图像的宽度上添加额外的像素。

下面的图片代表了我想要实现的目标：左图片 - 没有边框的图片，右图片，图片顶部带边框的图片

我尝试使用悬停添加边框，但将鼠标悬停在img标记上 - 边框会添加到图像中 - 然后图像的宽度会更大。

Answer 1

'box-sizing'属性在这里很重要，以确保它不会为div本身添加边距大小，而是添加到'inside'，如果你愿意的话。

.image {
  width:200px;
  height:200px;
  float:left;
  background:black;
  margin:10px;
  box-sizing:border-box;
  position:relative;
}
.image img {
  width:100%;
  float:left;
}
.image:hover .overlay {
  border-top:4px solid red;
}

.overlay {
  width:100%;
  position:absolute;
  top:0;
  left:0;
}

<div class="image">
  <div class="overlay"></div>
  <img src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_1280.jpg"/>
</div>
<div class="image">
  <div class="overlay"></div>
  <img src="https://cdn.pixabay.com/photo/2017/01/06/23/21/soap-bubble-1959327_1280.jpg"/>
</div>

Answer 2

您可以在css中添加此代码

    .image {
      width:200px;
      height:200px;
      float:left;
      background:black;
      margin:10px;
      box-sizing:border-box;
      position:relative;
    }
    .image:before {
      content:'';
      opacity:0;     
}
    .image:hover:before {
      position:absolute;
      height:5px;
      width:100%;
      top:0px;
      background:red;
      z-index:100;
      content:'';
      -webkit-transition:all .5s;
      opacity:1;
    }

<div class="image"></div>

Answer 3

这仍然是可能的。查看下面的小提琴链接中的代码并尝试这样的事情：

<强> HTML

<div class="image-container">
  <div class="top-border"></div>
  <img src="yourimagehere">
</div>

<强> CSS

.image-container {
  position:relative;
  width:225px;
  height:225px;
}

.top-border {
  width:100%;
  height:10px;
  background:green;
  position:absolute;
  display:none;
}

.image-container:hover .top-border {
  display:block
}

https://jsfiddle.net/4k52y5kc/5/