在悬停Flexbox上显示另一个图像

Question

因此，当我将鼠标悬停在其中之一上时，我尝试更改其图像。我正在尝试对三张图片执行此操作，但是这样做很麻烦。我知道我需要使用：hover psuedo，但是不确定如何进行此操作。

#three { 
  background-color: #035177;
  padding: .5vw;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: column;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
}
#three div { 
  -webkit-box-flex: auto;
  -ms-flex: auto;
  flex: auto; 
  width: 200px; 
  margin: .5vw; 
}
#three div img { 
  width: 100%; 
  height: auto; 
}

       <div id="three">
            <div id="picutureOne">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-1.jpg" alt>
                
            </div>
            
            <div id="pictureTwo">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-2.jpg" alt>
            
            </div>
            
            <div id="pictureThree">
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/jeremiah-wilson-3.jpg" alt>
            
            </div>
        </div>