<div class="option-con one">
  <p class="option-title">Option 1</p>
  <div class="main-item">
    <div class="avatar-bg">
      <div class="avatar">
        <img src="https://lh3.googleusercontent.com/iUjcaWjKfAiKQ8iqzbrP6b-T0f5TPI_bjQvMEvBJZ2eWHdFPKKj0FEEF6JCiOzrT1R4-3Ff597VFW_-Ej5Hpx2nnHith3vooxmqSmtyhh_2Hp3vQf-SBZwcosz8FUxf_Pa5pCkKGEBbx-bTBG_sd5AqM--08S-jWPeJqY2u5E3qgmnOQLC1rH1sBTmbhG6dhhcQYjiTnoNrmUKdVt9DHjwI7DzYaGJot6Ff-QX-GTEOOFBeSEftLx6H-QupbrqRsm7Ho0MDnq1YlWjnu1NRpYo8_g7MLLg15EUha8QTAfTPd8wjC24xvCzhQcB66gbpO87ffpeOXx9FXC9RFc9aGzSZpvSSu3YJh92OmGR3PYX2RITqNhoDX3XQqrRjx5nwajRYTBXGGmRvbubHwJkddNU3XCdYbhEvw8YsrHOggBxBmQg37T5PPQ_Z_01mT2uCKK6B_exNw_j1JwwdpLTahpS4IWUngv8oCzHCCHzzx9CsiZI_MT5FldPzq7VMrzVtpmJ3hbMjAD8JURWiQesDBuKx5hAFZpYpUgwb4kJy9yPyYUg7jEUWlypSRcgqNzqtOjO8EFeN7FtlxZR3pVNccBiahKduoS-lYR8B8vj6mAhh7cKj2mVH74gzpZcN6cLo03CWegdRxluWDwb9zBa9XACAtetINxvakY9wEm3rOoQ=s500-no" alt="" />
      </div>

    </div>
    <p class="title">In Love With A Ghost</p>
    <div class="label">
      <p class="hashtag">#hover #pink</p>
      <p class="link">Open Link</p>
    </div>
  </div>


  <div class="main-item green">
    <div class="avatar-bg">
      <div class="avatar">
        <img src="https://lh3.googleusercontent.com/14ctj8zq_qkw0kpyWaMH22bgcpGvE8tqO4_CtJmWIDLe1FAs6hXcwm9re-Z1Yi4x1449_HQmXAb-8wfWsIKtZbbajNNQaF9zCREx4_2ojgY5pUz14IQYeaDalSGzU4xGHAkNkqxfmIO51RC4COO1tqE6VZzO4Xq6aCpqvd5ks9AtBrAH7IBZHdbE6dN7aUvMsQdkt6_GPWGlQoz7L06yDsjffiveXm73GnwTpJKLePcUgvVXD5K58i9YJQ4lRM1t4S2RM7FL4nfILztR4Xfd0UTzLkRwNlNBph4Nv-aKr6Fx2BlV6x36O8j3PVlKF6Hfo5P9l9Paefvjm7rz0ki4NhuKHNyzXjyGyWJaHseAj5P0r_tLkh2K6O-LMV0cyMxsdtjHd4-_-rd1fVj62YXAR4jdT6IkRiSNsyidCNXHWePR3hgygTuhaKyYe8FbfCncNFpPX7C8r_XzhBTzWFu6t5hMtDDcw5kvrJTbhcKLfjlEUy9O1NHMxWOvE5YcH9F9v7OoOsg3_G8d69zsA42lB1rXYPTPZ8ogRgKyE0d6qgpM-o-mLSyWN0k3jiYSSGY1I3DMnOajJLL5A222_i1PdVRuIDJP2YPYPhl-YmWa4aK2TLlopWhN8urntBaY_oCwiDXfGheDpJ6lrLf41AuliA0xrudbLpCGh0fcr92G2g=s500-no" alt="" />
      </div>

    </div>
    <p class="title">In Love With A Ghost</p>
    <div class="label">
      <p class="hashtag">#hover #green</p>
      <p class="link">Open Link</p>
    </div>
  </div>
</div>

<div class="cleara"></div>

<div class="option-con">
  <p class="option-title">Option 2</p>
  <div class="main-item pink optiontwo">
    <div class="avatar-bg">
      <div class="avatar">
               <img src="https://lh3.googleusercontent.com/iUjcaWjKfAiKQ8iqzbrP6b-T0f5TPI_bjQvMEvBJZ2eWHdFPKKj0FEEF6JCiOzrT1R4-3Ff597VFW_-Ej5Hpx2nnHith3vooxmqSmtyhh_2Hp3vQf-SBZwcosz8FUxf_Pa5pCkKGEBbx-bTBG_sd5AqM--08S-jWPeJqY2u5E3qgmnOQLC1rH1sBTmbhG6dhhcQYjiTnoNrmUKdVt9DHjwI7DzYaGJot6Ff-QX-GTEOOFBeSEftLx6H-QupbrqRsm7Ho0MDnq1YlWjnu1NRpYo8_g7MLLg15EUha8QTAfTPd8wjC24xvCzhQcB66gbpO87ffpeOXx9FXC9RFc9aGzSZpvSSu3YJh92OmGR3PYX2RITqNhoDX3XQqrRjx5nwajRYTBXGGmRvbubHwJkddNU3XCdYbhEvw8YsrHOggBxBmQg37T5PPQ_Z_01mT2uCKK6B_exNw_j1JwwdpLTahpS4IWUngv8oCzHCCHzzx9CsiZI_MT5FldPzq7VMrzVtpmJ3hbMjAD8JURWiQesDBuKx5hAFZpYpUgwb4kJy9yPyYUg7jEUWlypSRcgqNzqtOjO8EFeN7FtlxZR3pVNccBiahKduoS-lYR8B8vj6mAhh7cKj2mVH74gzpZcN6cLo03CWegdRxluWDwb9zBa9XACAtetINxvakY9wEm3rOoQ=s500-no" alt="" />
      </div>

    </div>
    <p class="title">In Love With A Ghost</p>
    <div class="label">
      <p class="hashtag">#hover #pink</p>
      <p class="link">Open Link</p>
    </div>
  </div>


  <div class="main-item green optiontwo">
    <div class="avatar-bg">
      <div class="avatar">
         <img src="https://lh3.googleusercontent.com/14ctj8zq_qkw0kpyWaMH22bgcpGvE8tqO4_CtJmWIDLe1FAs6hXcwm9re-Z1Yi4x1449_HQmXAb-8wfWsIKtZbbajNNQaF9zCREx4_2ojgY5pUz14IQYeaDalSGzU4xGHAkNkqxfmIO51RC4COO1tqE6VZzO4Xq6aCpqvd5ks9AtBrAH7IBZHdbE6dN7aUvMsQdkt6_GPWGlQoz7L06yDsjffiveXm73GnwTpJKLePcUgvVXD5K58i9YJQ4lRM1t4S2RM7FL4nfILztR4Xfd0UTzLkRwNlNBph4Nv-aKr6Fx2BlV6x36O8j3PVlKF6Hfo5P9l9Paefvjm7rz0ki4NhuKHNyzXjyGyWJaHseAj5P0r_tLkh2K6O-LMV0cyMxsdtjHd4-_-rd1fVj62YXAR4jdT6IkRiSNsyidCNXHWePR3hgygTuhaKyYe8FbfCncNFpPX7C8r_XzhBTzWFu6t5hMtDDcw5kvrJTbhcKLfjlEUy9O1NHMxWOvE5YcH9F9v7OoOsg3_G8d69zsA42lB1rXYPTPZ8ogRgKyE0d6qgpM-o-mLSyWN0k3jiYSSGY1I3DMnOajJLL5A222_i1PdVRuIDJP2YPYPhl-YmWa4aK2TLlopWhN8urntBaY_oCwiDXfGheDpJ6lrLf41AuliA0xrudbLpCGh0fcr92G2g=s500-no" alt="" />
      </div>

    </div>
    <p class="title">In Love With A Ghost</p>
    <div class="label">
      <p class="hashtag">#hover #green</p>
      <p class="link">Open Link</p>
    </div>
  </div>
</div>

body {
  background-color: #2d3234;
  background-image: url(https://lh3.googleusercontent.com/_oZpTIImMpQFiKTS4i_-dFaYLELX8v4y7-pYbZmOLjlaFHzMmho9I46KpALrF1RVhYuEZzAOj94zmmlxbyzrJhlVam_G1qqGw09npr4ksMbE6iB0lZVkwUsLGtJ7E6ZWiVAAnIyhF7IyQ-zTf0jYQxTZw6z7NtKBtg3DDaMnnkdbP9ClxFmYvKiRv7qZ0dL8ounAxnaK1YKtq6lU5MiiRAzVWHSiJUqYLuihDTsdkhK_smj5qkMm4dqvcTbs-EGLr4vJFhDUcrJZspo9MgooVJGJcShhMKD1cGcbfr_Y0bA_bqNns7S3_hWXK9CzjYUwUDGrWB14GYgo3V0HrpeYx_WlmV7DlrUdGjE0PK-2Y3cDQEkbGEi9yZNG-BpZI8CxPWM90s4Yo-_D6N_48ZYU4_SOJvmc3K_3Vauig3KPNDPXxN4Xqs58DXH-bAWWUSf7KTdzUnB27hm_mSI9qwz6K8tdzxR_ahtdczraeCgZDo-GyQ9kKfioFa8xapdYCyg1Xw6pr_T5x1pIkfJ2Me5QbHZ9tik4MhhNyCftOgzzcR6IAut4RiiRwbhDJ2hY6e1DFXTGt02XPslw0AdGWh00ryVpVuXDIfWfft9xT9i4-T3Gp6CCPOMfO0Y-hOEXooror0Lox789Q7HW9_9lp_gZrjCdtw1N7ClEQyNU_xi1CA=w264-h36-no);
  background-size: 10%;
}

.main-item {
  display: inline-block;
  margin: 0 15px;
  overflow: hidden;
  float: left;
  padding: 0 0 30px;
}

.avatar {
  transform: translateX(-100%);
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
  overflow: hidden;
}

.avatar img {
  width: 250px;
  transform: translateX(100%);
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.main-item:hover .avatar, .main-item:hover .avatar img {
  transform: translateX(0);
  transition: transform 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.title {
  color: #e99e87;
  font-family: monospace;
  margin: 5px 0;
  font-size: 16px;
  position: relative;
  display: inline-block;
  padding: 0 10px 0 5px;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.title:before {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  top: 0;
  background-color: #e99e87;
  transition: 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
  z-index: -1;

}

.main-item:hover .title:before  {
  right: 0%;
  transition: 0.5s 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.main-item:hover .title  {
  color: #2d3234;
  transition: 0.5s 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.avatar-bg {
  /*   background-color: #202425; */
  width: 250px;
  height: 250px;
  position: relative;
}

.main-item.green .title {
  color: #90feb5;
}

.main-item.green .title:before {
  background-color: #90feb5;
}

.main-item.green:hover .title  {
  color: #2d3234;
  transition: 0.5s 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.label {
  height: 15px;
  overflow: hidden;
  color: #adadad;
  font-family: monospace;
}

.label p {
  margin: 0;
  transition: .2s;
  transform: translateY(0%);
}

.label p.link {
  color: #e7e7e7;
  cursor: pointer;
}

.main-item:hover .label p {
  transform: translateY(-100%);
  transition: .5s 1s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.clear {
  clear:both;
}


.optiontwo .avatar-bg:before {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  top: 0;
  transition: 0.5s 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.optiontwo.main-item.pink .avatar-bg:before {
  background-color: #e99e87;
}


.optiontwo.main-item.green .avatar-bg:before {
  background-color: #90feb5;
}

.optiontwo.main-item:hover .avatar-bg:before{
  right:0;
  transition: 0.5s;
}

.optiontwo.main-item:hover .avatar, .optiontwo.main-item:hover .avatar img {
  transform: translateX(0);
  transition: transform 0.5s 0.5s;
  transition-timing-function: cubic-bezier(.85,0,.15,1);
}

.option-title {
  color: white;
  font-family: monospace;
  font-size: 25px;
}

.option-con {
  float: left;
  width: 50%;
}


@media (max-width:767px) { 
  .option-con {
    width: 100%;
  }
}