イメージアニメーションをオーバーレイテキストに適用するにはどうすればいいですか？

Question

イメージのアニメーションを作成して、オーバーレイテキストで白黒からホバーカラーに変えましたが、オーバーレイの上にマウスを置くと、イメージは白黒に戻ります。どのように私はそれを着色することができますか？ここで

は私のコードです：

#img { 
 
    filter: gray; /* IE6-9 */ 
 
    -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); 
 
    -moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); 
 
    box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75); 
 
    margin-bottom:20px; 
 
} 
 
#img:hover { 
 
    filter: none; /* IE6-9 */ 
 
    -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
} 
 
.middle { 
 
    transition: .5s ease; 
 
    opacity: 0; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%) 
 
} 
 
.container1:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container1:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.text { 
 
    background-color: rgb(45, 45, 65); 
 
    color: rgb(255, 250, 235); 
 
    text-align: center; 
 
    font-size: 14px; 
 
    padding: 16px 32px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="col-md-6 col-sm-4 col-xs-6 container1"> 
 
    <img id="img" class="img-responsive" src="http://lorempixel.com/400/200/"/> 
 
    <div class="middle"> 
 
    <div class="text">Text</br> 
 
     <a href="https://vimeo.com/206720941" target="_blank">Watch Video</a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

あなただけのMouseEnterコンテナは、それがスタイルを追加しますので、すべてのタイム時に、.container1:hover #imgに#img:hoverからあなたの要素の:hover selectorを変更する必要がありますプロパティを#imgに設定します。

.container1:hover #img { 
    filter: none; 
    /* IE6-9 */ 
    -webkit-filter: grayscale(0); 
    /* Google Chrome, Safari 6+ & Opera 15+ */ 
} 

#img { 
 
    filter: gray; 
 
    /* IE6-9 */ 
 
    -webkit-filter: grayscale(1); 
 
    /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
    -webkit-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75); 
 
    -moz-box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75); 
 
    box-shadow: 0px 2px 6px 2px rgba(0, 0, 0, 0.75); 
 
    margin-bottom: 20px; 
 
} 
 

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

 
.container1:hover .image { 
 
    opacity: 0.3; 
 
} 
 

 
.container1:hover .middle { 
 
    opacity: 1; 
 
} 
 

 
.container1:hover #img { 
 
    filter: none; 
 
    /* IE6-9 */ 
 
    -webkit-filter: grayscale(0); 
 
    /* Google Chrome, Safari 6+ & Opera 15+ */ 
 
} 
 

 
.text { 
 
    background-color: rgb(45, 45, 65); 
 
    color: rgb(255, 250, 235); 
 
    text-align: center; 
 
    font-size: 14px; 
 
    padding: 16px 32px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="col-md-6 col-sm-4 col-xs-6 container1"> 
 
    <img id="img" class="img-responsive" src="http://lorempixel.com/400/200/" /> 
 
    <div class="middle"> 
 
    <div class="text">Text</br> 
 
     <a href="https://vimeo.com/206720941" target="_blank">Watch Video</a> 
 
    </div> 
 
    </div>