div内の画像の不透明度を変更する一方、不透明度を変更せずにその下のテキストの色を変更します

Question

これはおそらくとても簡単で、私はそれを得られません。私はそれを下にフォントの色を変更しながら（しかし、フォントの不透明度を変更しないで）画像の不透明度を変更div全体にマウスを移動するときにしようとしています。

私がここで言いたいの例を参照してください--->http://www.golfcarsofdallas.com/cart-finder/new-carts/club-car/commercial/

は、ここで私が持っているコードですが、私は画像の上にマウスを置く場合、私は、テキストや不透明度の上にマウスを置く場合にのみ色が変わります。部門全体ではありません。

.showroom-models-big img { 
    opacity: 1; 
    transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
    } 

.showroom-models-big p { 
    margin-top: -40px; 
    font-weight: 600; 
    text-align: center; 
    } 

.showroom-models-big a { 
    color: #000000; 
    transition: all .2s ease-in-out; 
    -moz-transition: all .2s ease-in-out; 
    -webkit-transition: all .2s ease-in-out; 
    } 

.showroom-models-big img:hover { 
    opacity: 0.7; 
    } 
.showroom-models-big a:hover { 
    color: #35c411; 
    } 

Answer 1

:hoverをdivに設定し、この例のように内部の要素を設定する必要があります。

.container { 
 
    background: #fff; 
 
    display:inline-block; 
 
    text-align: center; 
 
} 
 
.container:hover img { 
 
    opacity: .6; 
 
} 
 
.container:hover p { 
 
    color: blue; 
 
}

<div class="container"> 
 
    <img src="http://www.golfcarsofdallas.com/wp-content/uploads/streetlegal.jpg" alt=""> 
 
    <p>Some text</p> 
 
</div>