ホバーの背景画像を色に変更する

Question

マウスを上に移動すると、画像のdivの背景を色に変更しようとしています。私はそれをほぼ達成することができましたが、色はdiv内のテキストにも行きます。

HTML：

<div> 
    <h3>LIPSUM DOLORES DILORES DUM DUM</h3> 
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting 
    industry. Lorem Ipsum has been the industry's standard dummy text ever 
    since the 1500s, when an unknown printer took a galley of type and 
    scrambled it to make a type specimen book. It has survived not only five 
    centuries, but also the leap into electronic typesetting, remaining 
    essentially unchanged.</p> 
</div> 

はCSS：

div { 
    background-image: url("https://static.pexels.com/photos/127028/pexels-photo-127028.jpeg"); 
    background-size: cover; 
    width: 300px; 
    height: 300px; 
} 

div:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 300px; 
    height: 300px; 
    background: rgba(0, 0, 0, 0.6); 
    opacity: 0; 
    transition: all 0.8s; 
} 

div:hover:before { 
    opacity: 1; 
    background: rgba(0, 0, 0, 1); 
    transition: all 0.8s; 
} 

div h3, 
div p, 
body { 
    margin: 0; 
    padding: 0; 
} 

div h3, 
div p { 
    color: red; 
    z-index: 1000; 
} 

https://jsfiddle.net/j65k4LtL/

Answer 1

あなたはこの

.outer { 
 
    background-image: url("https://static.pexels.com/photos/127028/pexels-photo-127028.jpeg"); 
 
    background-size: cover; 
 
    width: 300px; 
 
    height: 300px; 
 
} 
 

 
.outer:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    width: 300px; 
 
    height: 300px; 
 
    background-color: rgba(0, 0, 0, 0.6); 
 
    opacity: 0; 
 
    transition: all 0.8s; 
 
} 
 

 
.outer:hover:before { 
 
    opacity: 1; 
 
    
 
} 
 
.inner{ 
 
    position: relative; 
 
} 
 

 
div h3, 
 
div p, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
div h3, 
 
div p { 
 
    color: red; 
 
    z-index: 1000; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <h3> 
 
    LIPSUM DOLORES DILORES DUM DUM 
 
    </h3> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
    
 
</div>

のようにそれを行うことができます

内部コンテナを作成し、それを相対的な位置に配置します。