テキストが不透明

Question

私は画像ホバー効果を作成しようとしていますが、私は2つの2の問題の1抱えているに影響されない画像ホバー効果の作成：

1. テキストおよび

2. 画像がホバーして正しく移動しますが、テキスト全体にカーソルを合わせると画像全体に戻ります（背景が不透明になります）。イメージの元のバージョン。

私はいくつかの異なる方法を試しましたが、私はこれらの問題を同時に過ぎることはできません。だから私が達成したいのは、

- 不透明な画像と通常の色のテキストで始まり、ホバーすると、画像は正常になり、テキストはそのままで、カーソルは画像上に

.outer { 
 
\t opacity: 0.25; 
 
     -webkit-transition: all .5s ease; 
 
     -moz-transition: all .5s ease; 
 
     -o-transition: all .5s ease; 
 
     -ms-transition: all .5s ease; 
 
     transition: all .5s ease; 
 
    } 
 
    .outer:hover{ 
 
     opacity: 1.0; 
 
\t cursor: pointer; 
 
    } 
 

 
    h2.image-headings { 
 
\t position: absolute; 
 
\t top: 40%; 
 
\t width: 100%; 
 
\t font-size: 60px; 
 
\t color: #fff; 
 
    }

<div class="outer"> 
 
    <img src="http://wasatchhospitality.com/wp-content/uploads/2017/02/wasatch-elements.jpg"> 
 
    <h2 class="image-headings">Management Team</h2> 
 
    </div>

このコードは、テキストと画像が不透明オフの開始を示しています。

は、ここに私のコードです。ありがとう

Answer 1

イメージの不透明度を変更したい場合は、親divではなく、イメージの変更/遷移不透明度にルールを変更します。

.outer img { 
 
    opacity: 0.25; 
 
    -webkit-transition: all .5s ease; 
 
    -moz-transition: all .5s ease; 
 
    -o-transition: all .5s ease; 
 
    -ms-transition: all .5s ease; 
 
    transition: all .5s ease; 
 
} 
 

 
.outer { 
 
    cursor: pointer; 
 
} 
 

 
.outer:hover img { 
 
    opacity: 1.0; 
 
} 
 

 
h2.image-headings { 
 
    position: absolute; 
 
    top: 40%; 
 
    width: 100%; 
 
    font-size: 60px; 
 
    color: #fff; 
 
}

<div class="outer"> 
 
    <img src="http://wasatchhospitality.com/wp-content/uploads/2017/02/wasatch-elements.jpg"> 
 
    <h2 class="image-headings">Management Team</h2> 
 
</div>

Answer 2

私はあなたに感謝し、彼らはアニメーションと働い