0
この要素にオーバーレイを追加できません。私は:before
を試しましたが、動作しません。同じ要素のオーバーレイ色と背景色の両方を追加する方法
.bot-about li {
display: inline-block;
padding: 5px 15px;
}
.bot-about li img {
border-radius: 50%;
height: 50px;
width: 50px;
padding: 3px;
/*box-shadow: 0px 0px 0px 5px rgba(0, 0, 0, 0.1);*/
margin: 10px 10px 0 10px;
-webkit-transition: box-shadow 0.3s ease;
-moz-transition: box-shadow 0.3s ease;
transition: box-shadow 0.3s ease;
position: relative;
}
.bot-about li img:hover {
box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
}
.bot-header {
color: rgba(255, 85, 70, .8);
text-align: left;
margin-left: 10%;
font-size: 16px;
}
.bot-about {
position: relative;
}
.bot-img-text {
position: relative;
left: 0;
right: 0;
}
.bot-about li {
position: relative;
}
.bot-about .item {
vertical-align: middle;
display: inline-block;
text-align: center;
}
.bot-about img {
width: 100px;
height: 100px;
}
.bot-about .caption {
display: block;
margin-left: 2px;
margin-top: 10px;
}
<div class="bot-container">
<div class="bot-cards">
<div class="bot-card">
<div class="bot-about">
<!-- Skills section -->
<div class="bot-header">
Connections
</div>
<ul>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="c">
</a>
<span class="caption">Concept</span>
</div>
</li>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="e">
</a>
<span class="caption">Exam</span>
</div>
</li>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="f">
</a>
<span class="caption">Formula</span>
</div>
</li>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="t">
</a>
<span class="caption">Test</span>
</div>
</li>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="v">
</a>
<span class="caption">Video</span>
</div>
</li>
<li>
<div class="item">
<a href="#">
<img src="https://via.placeholder.com/50x50" class="q">
</a>
<span class="caption">Quiz</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
を擬似を追加しました。ここで何を達成しようとしていますか? –
こんにちは@MitchelJager divアイテムのimgにオーバーレイrgba(0,0,0.5)を追加する方法 – harry