<section class="section section-ko-team">
    <div class="grid-container">
        <div class="inner-container">
            <div class="team-card-container">
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Bibendum Justo</h3>
                                <h4 class="role">Aenean Condimentum</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Sed posuere consectetur est at lobortis.</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Pellentesque Fringilla</h3>
                                <h4 class="role">Sollicitudin</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Pellentesque Parturient</h3>
                                <h4 class="role">Condimentum Aenean</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Nullam quis risus eget urna mollis ornare vel eu leo. Sed posuere consectetur est at lobortis. Nullam id dolor id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Fringilla Parturient</h3>
                                <h4 class="role">Condimentum</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod.</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Pellentesque</h3>
                                <h4 class="role">Fringilla</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Donec id elit non mi porta gravida at eget metus. Etiam porta sem malesuada magna mollis euismod</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="team-card">
                    <div class="team-card__container">
                        <div class="team-card__cover">
                            <img src="https://source.unsplash.com/random/350x505" alt="alt_text" class="img">
                        </div>
                        <div class="team-card__content">
                            <div class="team-card__header">
                                <h3 class="title">Vehicula Sit Amet</h3>
                                <h4 class="role">Amet</h4>
                            </div>
                            <div class="team-card__copy">
                                <p class="copy">Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Maecenas faucibus mollis interdum. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
                            </div>
                            <div class="team-card__footer">
                                <ul class="list">
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Facebook">
                                        		<i class="icon icon-facebook"></i>
                                        	</a>
                                    </li>
                                    <li class="list__li">
                                        <a href="javascript:void(0)" class="link" title="Profilo Twitter">
                                        		<i class="icon icon-twitter"></i>
                                        	</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
@import url('https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed:300,400,500,600,700,800');

.demo body {
background-color: #f0f2f5;
}

.inner-container {
    max-width: 1130px;
    margin: 0 auto;
}

.team-card-container {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 12px;
}

@media print,
screen and (min-width: 40em) {
    .team-card-container {
        padding: 0;
    }
}

.team-card {
    position: relative;
    width: 100%;
    margin: 25px auto;
    text-align: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

@media print,
screen and (min-width: 40em) {
    .team-card {
        width: 50%;
    }
}

@media print,
screen and (min-width: 64em) {
    .team-card {
        min-height: calc(505px + 32px + 25px);
        overflow: hidden;
        width: 33.33%;
    }
    .team-card:hover .team-card__cover {
        max-height: 100%;
        background-color: #ff3371;
        box-shadow: 0 20px 28px 0 rgba(13, 23, 54, 0);
    }
    .team-card:hover .team-card__content {
        transform: translateY(0);
    }
    .team-card:hover .img {
        box-shadow: 0 33px 48px 0 rgba(13, 23, 54, 0);
        opacity: .7;
    }
    .team-card:hover .title,
    .team-card:hover .role {
        color: #fff;
    }
    .team-card:hover .copy {
        opacity: 1;
        transition: all 0.4s 0.16s cubic-bezier(0.11, 0.565, 0, 0.935);
    }
}

.team-card__cover {
    min-height: 395px;
    max-height: 395px;
    width: 100%;
    margin: 0 auto;
    background-color: rgba(255, 51, 113, 0);
    transition: all 0.4s cubic-bezier(0.11, 0.565, 0, 0.935);
    overflow: hidden;
    box-shadow: 0 20px 28px 0 rgba(13, 23, 54, 0.51);
}

@media print,
screen and (min-width: 40em) {
    .team-card__cover {
        max-width: 300px;
    }
}

@media print,
screen and (min-width: 64em) {
    .team-card__cover {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
}

@media screen and (min-width: 75em) {
    .team-card__cover {
        max-width: 350px;
        min-width: 350px;
    }
}

.team-card__container {
    width: 100%;
    max-width: 350px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column;
}

@media print,
screen and (min-width: 40em) {
    .team-card__container {
        max-width: 315px;
    }
}

@media screen and (min-width: 75em) {
    .team-card__container {
        max-width: 350px;
    }
}

.team-card__content {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 32px 32px 0 32px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.11, 0.565, 0, 0.935);
}

@media print,
screen and (min-width: 64em) {
    .team-card__content {
        padding: 32px;
        transform: translateY(385px);
    }
}

.team-card__copy {
    display: none;
}

@media print,
screen and (min-width: 64em) {
    .team-card__copy {
        display: block;
        margin: 20px 0;
    }
}

.team-card__footer {
    display: none;
}

@media print,
screen and (min-width: 64em) {
    .team-card__footer {
        display: block;
        margin-top: auto;
    }
}

.team-card .title {
    margin: 0;
    font-size: 40px;
    line-height: 1.35;
    color: #0d1736;
    font-family: 'Barlow Semi Condensed', sans-serif;
    transition: all 0.4s cubic-bezier(0.11, 0.565, 0, 0.935);
}

.team-card .copy {
	font-family: 'Barlow Semi Condensed', sans-serif;
    opacity: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #fff;
    transition: all 0.4s cubic-bezier(0.11, 0.565, 0, 0.935);
}

.team-card .img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    opacity: 1;
    filter: gray;
    filter: grayscale(100%);
    mix-blend-mode: darken;
    transition: transform 0.6s cubic-bezier(0.11, 0.565, 0, 0.935), height 0.4s cubic-bezier(0.11, 0.565, 0, 0.935), width 0.4s cubic-bezier(0.11, 0.565, 0, 0.935), opacity 0.4s 0.2s cubic-bezier(0.11, 0.565, 0, 0.935), mix-blend-mode 0.4s 0.2s cubic-bezier(0.11, 0.565, 0, 0.935);
}

.team-card .role {
    margin: 0;
    font-size: 18px;
    line-height: 2;
    color: #40b2ff;
    transition: all 0.4s cubic-bezier(0.11, 0.565, 0, 0.935);
}

.team-card .list {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.team-card .list__li {
    display: inline-block;
}

.team-card .link {
    color: #fff;
    font-size: 24px;
}

.team-card .link:hover,
.team-card .link:focus,
.team-card .link:active {
    color: #fff;
}
View Compiled
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.0/css/foundation.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.