<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="page">
<div class="page__demo">
<section class="section">
<div class="main-container">
<div class="section__content teamy-team">
<article class="teamy teamy_style2 teamy_mask-circle">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl2_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<p>Тут щось вспливає</p>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Suzan Lois</h3>
<span class="teamy__post">Graphic Designer</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl3_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<p>Тут щось вспливає</p>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Dora Caelan</h3>
<span class="teamy__post">HR-manager</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-rotate-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl4_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<p>Тут щось вспливає</p>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rosanna Pattie</h3>
<span class="teamy__post">Illustrator</span>
</div>
</article>
<article class="teamy teamy_style2 teamy_mask-circle teamy_zoom-slide-photo">
<div class="teamy__layout">
<div class="teamy__preview">
<img src="https://stas-melnikov.ru/cliparts/girl5_424x640.jpg" class="teamy__avatar" alt="The demo photo">
</div>
<div class="teamy__back">
<div class="teamy__back-inner">
<p>Тут щось вспливає</p>
</div>
</div>
</div>
<div class="teamy__content">
<h3 class="teamy__name">Rose Alpha</h3>
<span class="teamy__post">Photographer</span>
</div>
</article>
</div>
</div>
</section>
</div>
</div>
/*
* 1. core styles
*/
.teamy{
position: relative;
z-index: 1;
overflow: hidden;
}
.teamy__layout{
position: relative;
}
.teamy__preview{
position: relative;
overflow: hidden;
}
.teamy__avatar{
display: block;
max-width: 100%;
position: relative;
z-index: 1;
}
.teamy__preview:before{
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
}
.teamy__back{
width: 100%;
height: 100%;
box-sizing: border-box;
opacity: 0;
will-change: opacity;
display: flex;
flex-direction: column;
justify-content: center;
position: absolute;
top: 0;
left: 0;
z-index: 3;
}
.teamy:hover .teamy__back{
opacity: 1;
height: 100%;
transition: opacity .4s cubic-bezier(0.71, 0.05, 0.29, 0.9) .2s;
}
.teamy__name{
margin-top: 0;
margin-bottom: 0;
}
.teamy__post{
display: block;
}
/*
* 2. visual styles
*/
/* common styles for visual styles */
.teamy__back{
padding-left: 10px;
padding-right: 10px;
text-align: center;
}
.teamy__content{
padding: 20px;
}
.teamy__name{
font-size: 1.3em;
}
.teamy__post{
margin-top: .5em;
font-size: .8em;
text-transform: uppercase;
}
/* style 2 */
.teamy_style2 .teamy__content{
width: 100%;
box-sizing: border-box;
position: absolute;
left: 0;
bottom: 0;
z-index: 4;
}
.teamy_style2 .teamy__name{
font-weight: 400;
}
/*
* 3. masks
*/
/* mask circle */
.teamy_mask-circle .teamy__preview:before{
width: 0;
height: 0;
padding: 25%;
border-radius: 50%;
transition: transform .3s ease, opacity .3s ease-out;
will-change: opacity, transform;
opacity: 0;
transform: translate(-50%, -50%) scale(0);
}
.teamy_mask-circle:hover .teamy__preview:before{
opacity: 1;
transform: translate(-50%, -50%) scale(4);
transition-duration: .6s;
}
/*
* 4. animations for preview
*/
/*
* 5. default skin
*/
.teamy__preview:before{
background-color: rgba(72, 27, 174, .7);
}
.teamy_style2, .teamy_style3{
color: #fff;
}
.teamy_style2 .teamy__content{
background-color: rgba(72, 27, 174, .85);
}
/*
* demo page
*/
@media screen and (min-width: 768px){
html{
font-size: 62.5%;
}
}
@media screen and (max-width: 767px){
html{
font-size: 50%;
}
}
body{
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
font-size: 1.6rem;
color: #222;
margin: 0;
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
:root{
--colorBlack: #222;
--colorWhite: #fff;
--colorGray: #f0f0f0;
--colorAlternative: #a03549;
--colorAlternativeDark: #650813;
}
.title{
margin-top: 0;
margin-bottom: 0;
}
.page{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.page__demo{
flex-grow: 1;
}
.footer{
padding-top: 1rem;
padding-bottom: 1rem;
text-align: center;
font-size: 1.4rem;
}
.footer__link{
text-decoration: none;
color: inherit;
}
@media screen and (min-width: 361px){
.footer__container{
display: flex;
justify-content: space-between;
}
}
@media screen and (max-width: 360px){
.melnik909{
display: none;
}
}
/* layout */
.main-container{
max-width: 1400px;
padding-left: 2rem;
padding-right: 2rem;
margin-left: auto;
margin-right: auto;
}
.section:nth-of-type(even){
background-color: var(--colorGray);
}
.section__header{
position: relative;
padding-bottom: 2rem;
text-align: center;
text-transform: uppercase;
}
.section__header:before{
content: "";
width: 5rem;
height: 3px;
background-color: var(--colorAlternative);
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.section__title{
font-size: 2.8rem;
}
.section__hint{
font-size: 1.4rem;
display: block;
margin-top: 1rem;
}
.section__content{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
@media screen and (min-width: 641px){
.section{
padding-top: 8rem;
padding-bottom: 8rem;
}
.section__header{
margin-bottom: 6rem;
}
.section__content{
justify-content: center;
}
}
@media screen and (max-width: 640px){
.section{
padding-top: 4rem;
padding-bottom: 4rem;
}
.section__header{
margin-bottom: 3rem;
}
}
/* options */
.radio{
position: absolute;
left: -9999px;
}
.preview-options{
padding-top: 2rem;
}
.preview-options__container{
display: flex;
justify-content: center;
}
.preview-options__param{
display: inline-block;
cursor: pointer;
}
.preview-options__param:not(:last-child){
margin-right: 1.5rem;
}
.preview-options__color:before{
content: "";
width: 3.2rem;
height: 3.2rem;
display: block;
border-radius: 50%;
}
.preview-options__color:after{
content: "";
width: 75%;
height: 3px;
display: block;
margin: 1rem auto 0;
}
/* demo params */
.teamy__preview:before{
background-color: rgba(160, 53, 73, .7);
}
.teamy_style2 .teamy__content{
background-color: rgba(160, 53, 73, .85);
}
/* grid */
.teamy-team{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (min-width: 849px){
.teamy{
width: 25%;
}
}
@media screen and (min-width: 425px) and (max-width: 848px){
.teamy{
width: 50%;
}
}
@media screen and (max-width: 424px){
.teamy{
width: 100%;
}
.teamy:not(:first-child){
margin-top: 3rem;
}
}
