cssでオーバーレイされた部分の色を混ぜる

Question

私はクラスボックスでhtmlのdivを持っています。私は擬似クラスを使いました。画像と同じ結果が欲しい。私はアイコンを持っているボックスを持って、私は画像のようにすべてのテキストを持って、私が得ることは、テキストとアイコンの銀色の効果です。

期待される結果

得られた結果

HTML

enter code here 
<section class="section why-us"> 
    <div class="container"> 
     <div class="box left bordered-box selected"> 
      <img src="images/why-us-icon8.png" class="section-img"> 
      <h2>Online Research</h2> 
     </div> 
    </div> 
</section> 

CSS

.why-us .box{ 
      background:#F1F1F1; 
      margin-bottom:30px; 
      height:250px; 
     } 
     .bordered-box h2{ 
      color:#2c3e50; 
     } 
     .bordered-box:before{ 
      content:''; 
      position:absolute; 
      top:10px; 
      left:10px; 
      width:90%; 
      height:90%; 
      border:2px solid #B2E9F1; 
      z-index:1; 
     } 
     .selected:after{ 
      content:''; 
      position:absolute; 
      top:107px; 
      width:260px; 
      height:142px; 
      background:#E67E22; 
      background:rgba(255,140,0,0.4); 
      opacity:0.9; 
     } 

Answer 1

あなたは上のCSSでそれらの要素を変更することができます：コンテナのホバーが、私はあなたが位置によって色を変更することができますあまりにもわからない：絶対;オレンジ色のコンテナは、これらの要素の上に移行します...

既に要求されているように、あなたのコードは素晴らしいでしょう。