Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="team__item" itemprop="employee">
  <div class="team__inner" itemscope="" itemtype="http://schema.org/Person">
  <div class="team__content">
    <div class="team__content_back">
      <h3 itemprop="name">Name</h3>
      <p itemprop="jobTitle">JobTitle</p>
    </div>
  </div>
</div>

SassMeister-input.scss

// ----
// Sass (v3.3.5)
// Compass (v)
// ----

@import "compass";

/*
# Item Hover Effect

```
<div class="team__item" itemprop="employee">
  <div class="team__inner" itemscope="" itemtype="http://schema.org/Person">
  <div class="team__content">
    <div class="team__content_back">
      <h3 itemprop="name">Name</h3>
      <p itemprop="jobTitle">JobTitle</p>
    </div>
  </div>
</div>
```

*/

.team__item {
  width: 165px;
  height: 165px;
  h3 {
    margin: 0;
    padding-bottom: 5px;
    text-transform: uppercase;
  }
  p {
    padding-top: 5px;
    margin: 0 5px;
    border-top: 1px solid;
  }
}

.team__inner {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://pbs.twimg.com/profile_images/1440748460/SP_A0037_bigger.JPG);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.team__content {
  transition: all 0.4s ease-in-out;
  position: absolute;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  top: 0.9375rem;
  left: 0.9375rem;
  display: table;
  box-shadow: 0 0 0 1.25rem rgba(255, 255, 255, 0.3),inset 0 0 0.1875rem rgba(115, 114, 23, 0.8);
  .team__item:hover & {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
  }
}

.team__content_back {
  transform: rotate3d(0, 1, 0, 180deg);
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  perspective: 800px;
  background: #ff0;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  .team__item:hover & {
    transform: rotate3d(0, 1, 0, 0deg);
    background: rgba(255, 255, 255, 0.2);
    z-index: 1001;
  }
}

SassMeister-output.css

/*
# Item Hover Effect

```
<div class="team__item" itemprop="employee">
  <div class="team__inner" itemscope="" itemtype="http://schema.org/Person">
  <div class="team__content">
    <div class="team__content_back">
      <h3 itemprop="name">Name</h3>
      <p itemprop="jobTitle">JobTitle</p>
    </div>
  </div>
</div>
```

*/
.team__item {
  width: 165px;
  height: 165px;
}
.team__item h3 {
  margin: 0;
  padding-bottom: 5px;
  text-transform: uppercase;
}
.team__item p {
  padding-top: 5px;
  margin: 0 5px;
  border-top: 1px solid;
}

.team__inner {
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(https://pbs.twimg.com/profile_images/1440748460/SP_A0037_bigger.JPG);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  position: relative;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.team__content {
  transition: all 0.4s ease-in-out;
  position: absolute;
  width: 135px;
  height: 135px;
  border-radius: 50%;
  top: 0.9375rem;
  left: 0.9375rem;
  display: table;
  box-shadow: 0 0 0 1.25rem rgba(255, 255, 255, 0.3), inset 0 0 0.1875rem rgba(115, 114, 23, 0.8);
}
.team__item:hover .team__content {
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.8), inset 0 0 3px rgba(115, 114, 23, 0.8);
}

.team__content_back {
  transform: rotate3d(0, 1, 0, 180deg);
  transition: all 0.4s ease-in-out;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  perspective: 800px;
  background: #ff0;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.team__item:hover .team__content_back {
  transform: rotate3d(0, 1, 0, 0deg);
  background: rgba(255, 255, 255, 0.2);
  z-index: 1001;
}

SassMeister-rendered.html

<div class="team__item" itemprop="employee">
  <div class="team__inner" itemscope="" itemtype="http://schema.org/Person">
  <div class="team__content">
    <div class="team__content_back">
      <h3 itemprop="name">Name</h3>
      <p itemprop="jobTitle">JobTitle</p>
    </div>
  </div>
</div>