cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <svg id="svg-path-definition" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
  version="1.1">
  <defs>
    <!-- <path id="text_0_path" d="M 20 200 A 65 80 0 1 1 280 200 " /> -->
    <path id="text_0_path" d="
        M 100, 100
        m -90, 50
        a 100,100 0 1,0 280,0
        a 100,100 0 1,0 -280,0
        " />
  </defs>
</svg>

<section class="users">
  <div class="wrapper">
    <h2>Meet the Team</h2>
    <div class="users-container">
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/jsa/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Baby Face</div>
            <div class="user__title">CEO</div>
          </div>
        </div>

        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/sauro/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Sunglasses McGee</div>
            <div class="user__title">Biker</div>
          </div>
        </div>
        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Brad Frost</div>
            <div class="user__title">Astronaut</div>
          </div>
        </div>
        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/ashleyford/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Typical White Guy</div>
            <div class="user__title">Probably Marketing</div>
          </div>
        </div>
        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/ritu/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Interesting Brown Dude</div>
            <div class="user__title">Something to do with Money</div>
          </div>
        </div>
        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
      <div class="user">
        <div class="user__avatar">
          <img src="https://s3.amazonaws.com/uifaces/faces/twitter/andyvitale/128.jpg" alt="Zeldman" class="user__img" />
          <div class="user__info">
            <div class="user__name">Bald White Man</div>
            <div class="user__title">The Company Mirror</div>
          </div>
        </div>
        <div class="user__emojis">
          <svg xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"
            version="1.1">
            <use xlink:href="#text_0_path" fill="none" />
            <g font-family="Arial" font-size="32px">
              <text text-anchor="middle">
                <textPath xlink:href="#text_0_path" startOffset="50%">
                  😂 😍 😘 😭 ❤️️ 😊 😉 😜 💕 💖
                </textPath>
              </text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</section>
            
          
!
            
              @import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800')

$transition = 200ms ease-in-out
  
html, body
  box-sizing: border-box
  font-family: 'Open Sans', sans-serif
  overflow-x: hidden
  background-color: #EAEFF3
  
#svg-path-definition
  display: none
  
section.users
  padding: 3em
  
.wrapper
  width: 100%
  max-width: 850px
  margin: 0 auto
  background-color: #fff
  border-radius: 4px
  padding: 1em
  box-shadow: 0 2px 5px rgba(0,0,0,.1)
  
h2
  margin-left: 50px
  font-weight: 100
  font-size: 2.5em
  color: #444
  position: relative
  &:after
    content: ''
    background-color: #00aced
    padding: 2px
    width: 100px
    position: absolute
    bottom: -.45em
    left: 0
  
.users-container
  padding: 3em 1.5em
  display: flex
  justify-content: center
  flex-wrap: wrap
  
.user
  position: relative
  border: 1px solid black
  margin: 2rem
  width: 200px
  height: 200px
  font-size: 0px
  transition: $transition
  
.user__avatar
  width: 100%
  height: 100%
  display: block
  clear: both
  overflow: hidden
  transition: $transition
  
.user__img
  width: 100%
  object-fit: cover
  object-position: 50% 50%
  transition: $transition
  
.user__info, .user__emojis
  opacity: 0
  pointer-events: none
  
.user__info
  position: absolute
  top: 0
  bottom: 0
  right: 0
  left: 0
  font-size: 1rem
  background-color: rgba(black, .45)
  display: flex
  flex-direction: column
  justify-content: center
  text-align: center
  padding: 1em
  transition: $transition
  
.user__name
  font-size: 1.75em
  color: white
  line-height: 1.35
  padding-bottom: 0.35em
  
.user__title
  color: rgba(white, .75)
  
.user__emojis
  position: absolute
  top: -50px
  bottom: -50px
  right: -50px
  left: -50px
  font-size: 1.5em
  border-radius: 50%
  transform-origin: center
  perspective: 1000px
  transform: scale(0) rotate(90deg)
  transition: 300ms ease-in-out 100ms
  
  svg
    height: 100%

// hover state
.user:hover
  border-radius: 100%
  .user__avatar, .user__img, .user__info
    border-radius: 100%
  .user__img
    width: 110%
    margin-top: -5%
    margin-left: -5%
  .user__info, .user__emojis
    opacity: 1
    pointer-events: all
  .user__info
    z-index: 3
  .user__emojis
    animation: emojis 3500ms ease-in-out forwards
    
// emojis animation
@keyframes emojis
  0%
    transform: rotate(90deg) scale(0)
  12.5%
    transform: rotate(90deg) scale(1)
  100%
    transform: rotate(450deg) scale(1)
    
            
          
!
999px
Loading ..................

Console