ホバーで不透明度0.5のimg pinkishを作る方法は？

私は画像のセットを持っており、その画像がぼやけたときにその画像は退色します（白っぽく色あせます）。しかし、私が望むのは、0.5の不透明度を持つピンク（ピンクがかったフェード）であることです。私は色を変えることができません、私がしたのは、ホバリングされたときのイメージの退色（白っぽい退色）だけです。ホバーで不透明度0.5のimg pinkishを作る方法は？

.img-overlay { 
 
    position: relative; 
 
} 
 

 
.img-overlay img { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.img-overlay:hover img { 
 
    opacity: 0.5; 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
} 
 

 
.img-overlay:hover .middle { 
 
    opacity: 1; 
 
}

<div class="wrappingimages"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
 
    <div class="clearfix visible-xs-block"></div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
 
    <div class="clearfix visible-xs-block"></div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-10-31 benok

https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/ – mplungjan

たぶん 'バックグラウンド・ブレンド・モード 'には何が必要です：https：//でdeveloper.mozilla.org/en-US/docs/Web/CSS/background-blend-mode – MEE

は、あなたが探している結果を達成するために、異なるCSS filtersの組み合わせを使用することができます。私はピンクのように見えるまで数を微調整して微調整して例を作りました。

.img-overlay { 
 
    position: relative; 
 
} 
 

 
.img-overlay img { 
 
    opacity: 1; 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
    transition: .5s ease; 
 
    backface-visibility: hidden; 
 
} 
 

 
.img-overlay:hover img { 
 
    -webkit-filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%); 
 
    filter: sepia(1) hue-rotate(290deg) saturate(6) opacity(50%); 
 
} 
 

 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 

 
.text { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    font-size: 16px; 
 
    padding: 16px 32px; 
 
} 
 

 
.img-overlay:hover .middle { 
 
    opacity: 1; 
 
}

<div class="wrappingimages"> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
 
    <div class="clearfix visible-xs-block"></div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="row"> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    <!-- Optional: clear the XS cols if their content doesn't match in height --> 
 
    <div class="clearfix visible-xs-block"></div> 
 
    <div class="col-xs-12 col-sm-4 img-overlay"><img src="https://target.scene7.com/is/image/Target/16590700?wid=520&hei=520&fmt=pjpeg" style="max-width:100%"> 
 
     <div class="middle"> 
 
     <div class="text">Pasta</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

出典

2017-10-31 14:31:27

hmm私は以前にセピアCSSを試しましたが、色は同じではありません。しかし、とにかくありがとう^ _^ – benok

あなたはそれにも '色相 - 回転'をしなければならない、私は純粋なセピアがピンクではないことを知っている:) –

フィルタはすべてのブラウザと互換性がありませんので、代わりにあなたは背景として、あなたの画像を設定するだけホバーに表示されますオーバーレイ層を、作成することもできます。これは次のようなものです：

<div class="box overlay red" style="background-image: url('https://picsum.photos/200?image=187');"> 
    <h1>Pasta</h1> 
</div> 
<div class="box overlay blue" style="background-image: url('https://picsum.photos/200?image=378');"> 
    <h1>Pasta</h1> 
</div> 
<div class="box overlay green" style="background-image: url('https://picsum.photos/200?image=339');"> 
    <h1>Pasta</h1> 
</div> 
<div class="box overlay orange" style="background-image: url('https://picsum.photos/200?image=329');"> 
    <h1>Pasta</h1> 
</div> 


body { 
    text-align: center; 
} 
.box { 
    width:100px; 
    height:100px; 
    border:1px solid grey; 
    display: inline-block; 
    vertical-align: top; 
    margin-top: 10px; 
    background-image: url(http://lorempixel.com/output/food-q-c-100-100-10.jpg); 
    position: relative; 
} 

.overlay { 
    position: relative; 
} 

.overlay:before{ 
    position: absolute; 
    content:" "; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    display: none; 
    z-index:0; 
} 

.overlay:hover:before{ 
    display: block; 
} 

.red:before { 
    background-color: rgba(255,0,0,0.5); 
} 

.blue:before { 
    background-color: rgba(0,0,255,0.5); 
} 

.green:before{ 
    background-color: rgba(0,255,0,0.5); 
} 

.orange:before { 
    background-color: rgba(255,153,0, 0.5); 
} 

.box * { 
    position: relative; 
    /* hack */ 
} 

h1 { 
    color:white; 
}

次に、色と不透明度を使って遊びます。 codepenの表示方法を確認してください。

出典

2017-10-31 14:42:19

.img-overlay:hover:after img {background:pink; opacity:0.5;}

出典

2017-10-31 14:54:41 dean

ホバーで不透明度0.5のimg pinkishを作る方法は？

答えて

関連する問題