Cacher is the code snippet organizer for pro developers

html,body { margin: 0; padding: 0; }

a { text-decoration: none; }

ul, li { list-style: none; margin: 0; padding: 0; }

ul { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; }

ul li { width: 45%; margin-bottom: 50px; }

ul li a { display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; }

ul li .team-img { position: relative; width: 50%; max-width: 220px; margin-right: 40px; overflow: hidden; border-radius: 50%; transition: 0.6s; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -moz-transform: perspective(1000px); }

ul li .team-img::after { position: absolute; width: 100%; height: 100%; top: -100%; left: -100%; border-radius: 50%; background-color: #F58220; background: -webkit-linear-gradient(left, #F58220 0%, #ED1C24 100%); background: linear-gradient(to right, #F58220 0%, #ED1C24 100%); content: ''; z-index: -1; transition: 0.5s; }

ul li .team-img::before { display: block; padding-bottom: 100%; content: ''; }

ul li .team-img .front, ul li .team-img .back { position: absolute; top: 6px; left: 6px; right: 6px; bottom: 6px; }

ul li .team-img .front img, ul li .team-img .back img { position: absolute; width: 100%; height: 100%; top: 50%; left: 50%; border-radius: 50%; -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

ul li .team-img .back { opacity: 0; transition: all 0s 0.15s; -ms-transform: ratateY(180deg); -webkit-transform: ratateY(180deg); transform: ratateY(180deg); }

ul li a:hover .team-img { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }

ul li a:hover .team-img::after { top: 0; left: 0; }

ul li a:hover .team-img .back { opacity: 1; }

<ul>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/men/1.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/women/2.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/women/3.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/women/1.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/men/2.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/men/5.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/men/4.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
  <li>
    <a href="#">
      <div class="team-img">
        <div class="front">
          <img src="https://randomuser.me/api/portraits/women/17.jpg" alt=""/>
        </div>
        <div class="back">
          <img src="https://randomuser.me/api/portraits/women/5.jpg" alt=""/>
        </div>
      </div>
    </a>
  </li>
</ul>