<div class="col-lg-6">
<ul>
<li><a target="_blank" href="http://stackoverflow.com/users/6634978/rabin-lama"><img src="images/stackoverflow.png" alt="Upwork" class="img-responsive" style="width: 35px;display:inline;"></a></li>
</ul>
</div>
これは私が使用していた画像です：私はそれの上に置くとホバー中に画像に色付きのオーバーレイを追加するにはどうすればいいですか？
を私が欲しいものは、このPNG画像の上に色付きのオーバーレイです。また、オーバーレイは、画像の可視部分のみをカバーすると考えられる。それ、どうやったら出来るの ？
画像の親に対してはwidthとheightを使用してください。
li a {
display: block;
width: 50px;
height: 50px;
border-radius: 100%;
position: relative;
overflow: hidden;
}
li a img {
width: 100%;
height: auto:
vertical-align: top;
}
li a:after:hover {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0, 0, 0, 0.2);
}
あなたが唯一の画像の色を変更（およびそれ以上のオーバーレイのようなものを作る）したい場合は、私はあなたは、単にこれを行うことができるはずだと思う
li a{
display: block;
width: 40px;
height: 40px;
border-radius: 50%:
background-color: #CE6F2D;
position: relative;
}
li a:hover::after{
content: "";
background-color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
、試すこと：
.hoverOverlay:hover img {
background-color: rgba(0,0,0,0.1);
}
さらに、画像に「.hoverOverlay」クラスを追加します。
li'imgとpseudo tags :hoverのCSSを使用してこれを設定する必要があります。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<style type="text/css">
li {
list-style-type:none;
width:35px;
height:35px;
}
li img {
width:100%;
vertical-align:top;
}
li:hover {
border-radius:17.5px;
background-color:red;
}
li:hover img {
display:none;
}
</style>
<head>
<title></title>
</head>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<body>
<div class="col-lg-6">
<ul class="social-icons1">
<a target="_blank" href="http://stackoverflow.com/users/6634978/rabin-lama">
<li>
<img src="https://i.stack.imgur.com/ej4Lf.png" alt="Upwork" class="img-responsive">
</li>
</a>
</ul>
</div>
</body>
</html>
これをテストして正常に動作しました。がんばろう。 Jfiddleでテスト
あなたのCSSコード –
を共有するあなたは、ULタグにクラス属性によって混乱した場合、私はごめんなさい。それは何もしません。そして私はそれを取り除いた。私は今までにはCSSはありません。 –
しかし、あなたは何かを試して、あなたが試したことを何でも見せるはずだった。質問するのは良い方法ではありません。とにかく、自分の裁量で、私は質問に答えました。それがあなたに作用するかどうか確認してください。そうでない場合は、いくつかの調査をした後に試したことを追加してください。 – Lucian