Display another image on hover flexbox

Question

So I'm trying to have my images change when I hover over one of them. I'm trying to do this for the three pictures but I am having trouble doing so. I know that I need to use the :hover psuedo but I am unsure as to how I should proceed with this.

#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>