Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div style='margin:30px auto;text-align:center;'>
  <ul class='face-wrapper'>
    <li class='face-list'>
      <div class='desc-face cred'>Skepty
        <div class='more-desc'>Skepty is a magical pony</div>
      </div>
      <img src='data:image/jpg;base64,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'
      class='face-img' />
    </li>
    <li class='face-list'>
      <div class='desc-face cgreen'>Banany
        <div class='more-desc'>Nothing is more interesting than Banany</div>
      </div>
      <img src='data:image/jpg;base64,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'
      class='face-img' />
    </li>
    <li class='face-list'>
      <div class='desc-face cblue'>Excity
        <div class='more-desc'>Excity is very enthusiastic about stuffs</div>
      </div>
      <img src='data:image/jpg;base64,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'
      class='face-img' />
    </li>
    <li class='face-list'>
      <div class='desc-face cbrown'>Mehy
        <div class='more-desc'>This mysterious friend is in the skeptunus genus</div>
      </div>
      <img src='data:image/jpg;base64,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'
      class='face-img' />
    </li>
  </ul>
</div>
              
            
!

CSS

              
                body {
  background: #bbbbbb;
  background: -moz-linear-gradient(top, #bbbbbb 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bbbbbb), color-stop(100%, #ffffff));
  background: -webkit-linear-gradient(top, #bbbbbb 0%, #ffffff 100%);
  background: -o-linear-gradient(top, #bbbbbb 0%, #ffffff 100%);
  background: -ms-linear-gradient(top, #bbbbbb 0%, #ffffff 100%);
  background: linear-gradient(to bottom, #bbbbbb 0%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#ffffff', GradientType=0);
  background-repeat: no-repeat;
}

.face-wrapper,
.face-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.face-wrapper {
  text-align: center;
  width: 625px;
  margin: auto;
  border-radius: 50%;
}

.face-list,
.face-img {
  margin: auto;
  border-radius: 50%;
}

.face-list {
  background: #000;
  display: inline-block;
  margin: auto -20px;
  overflow: hidden;
  width: 150px;
  height: 150px;
  line-height: 220px;
  text-align: center;
  padding: 10px;
}

.face-img {
  transition: all .3s, transform .3s .2s;
  -webkit-transition: all .3s, -webkit-transform .3s .2s;
  opacity: .2;
  width: 75px;
  height: 75px;
}

.face-img:hover {
  opacity: 1;
  width: 150px;
  height: 150px;
  cursor: pointer;
}

.face-list:nth-child(odd):hover > .face-img {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.face-list:nth-child(even):hover > .face-img {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.face-list:nth-child(odd):hover > .face-img:hover {
  transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
}

.face-list:nth-child(even):hover > .face-img:hover {
  transform: rotate(20deg);
  -webkit-transform: rotate(20deg);
}

.desc-face {
  height: 100px;
  width: 130px;
  border-bottom: 10px solid black;
  border-right: 5px solid black;
  border-top: 5px solid black;
  border-radius: 0 50% 50% 50%;
  padding: 10px;
  position: absolute;
  line-height: 100px;
  margin-top: 40px;
  transition: all .3s .2s, opacity .3s .1s;
  font-size: 1.5em;
  opacity: 0;
  color: white;
  text-shadow: 1px 1px 1px #000;
  font-family: verdana;
  text-transform: uppercase;
  letter-spacing: 3px;
  box-shadow: 20px 30px 40px #000 inset;
}

.desc-face-hover {
  margin-top: 110px;
  opacity: 1;
}

.cred,
.cred > .more-desc:before {
  background: darkred;
}

.cgreen,
.cgreen > .more-desc:before {
  background: darkgreen;
}

.cblue,
.cblue > .more-desc:before {
  background: teal;
}

.cbrown,
.cbrown > .more-desc:before {
  background: brown;
}

.more-desc {
  padding: 10px 5px 5px 30px;
  width: 120px;
  top: 85px;
  position: absolute;
  margin-left: 70px;
  line-height: 12px;
  height: auto;
  font-size: 12px;
  font-family: consolas, courier;
  letter-spacing: 0;
  background: yellow;
  border-radius: 5px 8px 8px 20px;
  text-transform: none;
  color: black;
  text-shadow: none;
  box-shadow: 5px 5px 10px #333;
  text-align: right;
  opacity: 0;
  transition: all .2s .4s, opacity .3s;
  -webkit-transition: all .2s .3s, opacity .3s;
  transform-origin: 0 0;
  -webkit-transform-origin: 0 0;
  transform: rotate(-20deg);
  -webkit-transform: rotate(-20deg);
}

.more-desc:before {
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  background: red;
  top: 5px;
  left: 5px;
  box-shadow: 1px 2px 5px #000 inset;
}

.more-desc-hover {
  opacity: 1;
  transform: rotate(10deg);
  -webkit-transform: rotate(10deg);
}
              
            
!

JS

              
                $('.face-img').each(function (i) {
  	var $t = $('.face-img').eq(i);
    $t.bind({
        mouseenter: function () {
            $('.desc-face').eq(i).addClass('desc-face-hover');
            $('.more-desc').eq(i).addClass('more-desc-hover');
        },
        mouseleave: function () {
            $('.desc-face').eq(i).removeClass('desc-face-hover');
            $('.more-desc').eq(i).removeClass('more-desc-hover');
        }
    });
});
              
            
!
999px

Console