Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<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>
// ----
// 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;
}
}
/*
# 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;
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment