【发布时间】：2020-06-11 23:25:40
【问题描述】：
我想制作这些盒子。默认情况下，图像在中间应该在悬停时放在顶部。正如他们所做的那样。但我想在图像周围有一个“边框”，用来在没有悬停的情况下使盒子变暗。
有人知道如何创建这个“边框”吗？我还没有找到任何解决方案如何将 img-containers 的宽度设置为等于它的高度。
作为Youtube 的示例，但他们使用了字体，我想使用自定义图像。
* {
margin: 0;
}
body {
background-color: #171717;
}
.box {
margin: 5px;
display: inline-block;
width: 300px;
height: 200px;
overflow: hidden;
border-radius: 5px;
cursor: pointer;
}
.box .headline {
position: relative;
width: 100%;
height: 100%;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.box .headline .img-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.2);
transition: 0.5s;
-webkit-transition: 0.5s;
}
.box .headline .img-container img {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 80%;
padding: 10%;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.box:hover .headline {
height: 33%;
}
.box:hover .headline .img-container {
position: relative;
background-color: rgba(0, 0, 0, 0.2);
height: 100%;
border-radius: 50%;
}
.box:hover .headline .img-container img {
height: 70%;
border-radius: 50%;
}
.box .content {
opacity: 0;
padding: 5px;
max-height: calc(66% - 10px);
overflow: hidden;
transition: 0.5s;
-webkit-transition: 0.5s;
}
.box:hover .content {
opacity: 1;
}<div class="box" style="background-color: rgb(255, 131, 96);">
<div class="headline">
<div class="img-container">
<img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
</div>
</div>
<div class="content">
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
</div>
</div>
<div class="box" style="background-color: rgb(125, 206, 130)">
<div class="headline">
<div class="img-container">
<img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
</div>
</div>
<div class="content">
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
</div>
</div>
<div class="box" style="background-color: rgb(232, 226, 136)">
<div class="headline">
<div class="img-container">
<img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
</div>
</div>
<div class="content">
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
</div>
</div>
<div class="box" style="background-color: rgb(0,255,245)">
<div class="headline">
<div class="img-container">
<img src="https://image.flaticon.com/icons/svg/1041/1041820.svg">
</div>
</div>
<div class="content">
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum<br />
</div>
</div>感谢您的帮助。
【问题讨论】：
-
那么您是说您希望悬停时的深色边框是圆形而不是像现在这样的卵形？
-
是的。确切地。它应该是圆形的
-
我会使用 box-shadow 来避免使用边框大小，这是我的想法codepen.io/gc-nomade/pen/ZEGKKgL
-
是的，这是一个不错的解决方案。我可以为 box-shadow 使用相对单位还是不可能？
-
css变量可以使用，所以它也可以用于盒子大小，你不需要介意之后.. % 不起作用，它没有计算参考。用 css 更新的 pen var codepen.io/gc-nomade/pen/ZEGKKgL 通过 CSS 变量调整框的大小。
标签： html css height width border