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.

            
              <div class="client-wrap">
  
<!-- For the demo -->
 <div class="toggle-container">
  <div class="hover toggle-wrap">
    <span class="toggle">Low opacity </span>
    <div class="toggle-switch">
      <div class="switch"></div>
    </div>
  </div>
 </div>
  <!-- End -->

  <div class="client google">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>  
      <ul class="project-list">

        <hr class="bar">
        <h4 class="client-title">Google</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third and longer project name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third and longer project name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>

    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>

    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/commons/2/2f/Google_2015_logo.svg">
  </div>

  <div class="client microsoft">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">

        <hr class="bar">
        <h4 class="client-title">LG Corporation</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>

    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>

    <img class="client-logo smaller" src="https://upload.wikimedia.org/wikipedia/commons/b/bf/LG_logo_%282015%29.svg">
  </div>

  <div class="client logitech">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Logitech</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/commons/a/a9/Logitech_logo.png">
  </div>

  <div class="client oculus">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">oculus</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/en/6/66/Oculus_VR_Logo.png">
  </div>

  <div class="client skype">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Skype</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo smaller" src="https://upload.wikimedia.org/wikipedia/commons/a/a7/Skype_logo.svg">
  </div>

  <div class="client amd">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">AMD</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/commons/7/7c/AMD_Logo.svg">
  </div>

  <div class="client treehouse">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Treehouse Island, Inc.</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/en/a/a3/Treehouse%27s_logo_%28Jan_2015%29.png">
  </div>

  <div class="client nickelodeon">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Nickelodeon</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/commons/8/8b/Nickelodeon_logo_new.svg">
  </div>

  <div class="client toysrus">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Toys "R" Us</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo" src="https://upload.wikimedia.org/wikipedia/commons/9/9c/Logo_Toys_R_Us.svg">
  </div>

  <div class="client uniqlo">
    <div class="client-more-less"></div>
    <div class="client-meta">
      <div class="client-close"></div>
      <ul class="project-list">
        <hr class="bar">
        <h4 class="client-title">Uniqlo Co., Ltd.</h4>
        <li>Some Example Project</li>
        <li>Another Project</li>
        <li>The Third Name</li>
        <li>Fourth Project Name</li>
        <li>Another Name</li>
      </ul>
    </div>
    <div class="overflow-wrapper">
      <img data-src="http://lorempixel.com/300/250/business">
      <img data-src="http://lorempixel.com/300/250/technics">
      <img data-src="http://lorempixel.com/300/250/nature">
      <img data-src="http://lorempixel.com/300/250/city">
      <img data-src="http://lorempixel.com/300/250/transport">
    </div>
    <img class="client-logo square" src="https://upload.wikimedia.org/wikipedia/commons/9/92/UNIQLO_logo.svg">

  </div>

</div>
            
          
!
            
              /* Demo assets */
.touch .client-wrap .client.solid {
  opacity: 1;
  z-index: 5;
}

.touch .client-close.click-on {
  pointer-events: auto;
  z-index: 6;
}

.touch .client:hover .client-more-less::after {
  opacity: 0;
}

.toggle-container {
  text-align: center;
}

.toggle-wrap {
  margin: 0 auto 20px;
  display: inline-block;
  clear: both;
  text-align: center;
  padding: 10px;
  border-radius: 6px;
  font-weight: bolder;
}

.toggle {
  margin-right: 8px;
}

.touch div.minus.client-more-less::after {
  background-color: rgba(255, 255, 255, 0);
}

.toggle-switch {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: left;
  cursor: pointer;
  padding: 3px;
  border-radius: 25px;
  width: 42px;
  background-color: rgb(122, 212, 68);
  color: rgb(225, 225, 225);
  -webkit-transition: .4s ease all;
     -moz-transition: .4s ease all;
      -ms-transition: .4s ease all;
       -o-transition: .4s ease all;
          transition: .4s ease all;
}

.switch {
  float: right;
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255);
}

.switched-off {
  background-color: rgb(200, 200, 200);
}

.switched-off .switch {
  margin-right: 15px;
}

.switch {
  -webkit-transition: .2s ease all;
     -moz-transition: .2s ease all;
      -ms-transition: .2s ease all;
       -o-transition: .2s ease all;
          transition: .2s ease all;
}
/* End Demo Assets */

img[data-src] {
  opacity: 0;
}

img {
  opacity: 1;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Sans-serif;
}

.overflow-wrapper img.show-image {
  opacity: 1;
}

.client-wrap {
  margin: 5% auto 0;
  padding: 0;
  max-width: 1280px;
  width: 100%;
}

.client-wrap:hover > .client {
  opacity: .25;
}

.opacity-focus:hover > .client,
.solid.client {
  opacity: 1;
}

.opacity-focus .client {
  z-index: 0;
}

.client {
  vertical-align: middle;
  position: relative;
  margin: 5px;
  max-width: calc(20% - 20px);
  height: 100%;
  width: 100%;
  list-style-type: none;
  display: inline-block;
  text-align: center;
  transition: .2s ease all;
}

.no-touch .client:hover, 
.no-touch .opacity-focus .client:hover {
  opacity: 1;
  z-index: 2;
}

.client:hover .client-meta {
  opacity: 1;
  visibility: visible;
}

.client:hover .overflow-wrapper {
  z-index: 5;
  left: 0;
}

.touch .client:hover {
  opacity: 1;
  z-index: 2;
}

.client-meta {
  position: absolute;
  display: block;
  visibility: hidden;
  overflow: hidden;
  text-align: center;
  border-radius: 4px;
  opacity: 0;
  width: 100%;
  min-height: 200px;
  background-color: rgb(255, 255, 255);
  text-align: left;
  border: 1px solid rgb(228, 228, 228);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, .1);
  -webkit-transition: .2s ease all;
     -moz-transition: .2s ease all;
      -ms-transition: .2s ease all;
       -o-transition: .2s ease all;
          transition: .2s ease all;
}

.touch .client-more-less,
.touch .client-close {
  z-index: 2;
  position: absolute;
  left: calc(50% - 10px);
  text-align: center;
  top: 15px;
  height: 26px;
  width: 26px;
  text-align: center;
  border-radius: 50%;
  line-height: 1.3;
  font-weight: 600;
  transition: .2s ease all;
}

.touch .client.reset .client-meta{
  opacity: 0;
  visibility: hidden;
}

.touch .client-more-less {
  display: inline-block;
  pointer-events: none;
  z-index: 5;
  background-color: rgb(234, 236, 236);
  color: rgba(0, 0, 0, .5);
}

.touch .client-close {
  z-index: 6;
  background-color: transparent;
}

.client-close:hover ~ .client-meta {
  opacity: 0;
  visibility: hidden;
}

.client-close:hover ~ img.client-logo,
.client-more-less ~ img.client-logo {
  width: 80%;
}

.touch .client-more-less::before,
.touch .client-more-less::after {
  content: '';
  background-color: rgba(0, 0, 0, .25);
  padding: 0;
  display: block;
  border-radius: 3px;  
  position: absolute;
  margin: 0 auto;
}

.touch .client-more-less::before {
  margin: 11px 6px;
  width: 14px;
  height: 4px;
}

.touch .client-more-less::after {
  margin: 6px 11px;
  width: 4px;
  height: 14px;
}

/* Responsive Reset */
.reset {
  opacity: 1 !important;
}
.reset .client-logo {
  width: 80% !important;
}

.touch .reset .client-more-less::after {
  opacity: 1 !important;
}
/* End Responsive Reset */

.client:hover .client-logo {
  width: 76%;
}

img.reset-logo {
  width: 80%;
}

.project-list:hover .overflow-wrapper img,
.opaque {
  opacity: 1;
}

.overflow-wrapper {
  position: relative;
  padding-top: calc(100% - 45px);
  width: 100%;
  display: inline-block;
  z-index: 3;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  transition: .2s ease all;
}

.overflow-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  padding: 1px;
  border-radius: 4px 4px 0 0;
  -webkit-transition: .15s ease all;
     -moz-transition: .15s ease all;
      -ms-transition: .15s ease all;
       -o-transition: .15s ease all;
          transition: .15s ease all;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0) scale(1, 1);
}

.client-logo {
  z-index: 1;
  position: absolute;
  transform: translateY(-50%) translateX(-50%);
  left: 50%;
  top: 50%;
  width: 80%;
  height: auto;
  transition: .2s ease all;
  -webkit-animation: fadein .8s;
     -moz-animation: fadein .8s;
      -ms-animation: fadein .8s;
       -o-animation: fadein .8s;
          animation: fadein .8s;
}

.white-bg {
  background-color: rgb(255, 255, 255);
}

.project-list {
  overflow: hidden;
  max-height: 230px;
  margin-top: calc(100% - 44px);
  padding: 0;
  margin-bottom: 0;
  line-height: 1;
  padding-top: 0;
  padding-bottom: 20px;
  text-align: center;
  border-bottom: 4px solid rgb(189, 189, 255);
  transition: .2s ease all;
}

.project-list:hover {
  max-height: 270px;
}

.project-list:hover .bar {
  max-width: 100%;
  border-top: 4px solid rgb(189, 189, 255);
}

.project-list:hover {
  border-bottom: 4px solid rgb(255, 255, 255);
}

.bar {
  margin: 0 auto;
  border: 0;
  border-top: 4px solid rgb(232, 232, 232);
  max-width: calc(100% - 30px);
  transition: .2s ease all;
}

.project-list li {
  cursor: pointer;
  display: block;
  text-align: center;
  padding: 8px 10px;
  font-size: .9rem;
}

.project-list li:hover {
  color: rgb(100, 100, 100);
}

/* Sizes for demo */
.square {
  padding: 20%;
}

.smaller {
  padding: 10%;
}
/* End Sizes for demo */

@media screen and (max-width: 1024px) {
  .client {
    max-width: calc(25% - 30px);
  }
}

@media screen and (max-width: 820px) {
  .client {
    max-width: calc(33.33% - 30px);
  }
}

@media screen and (max-width: 620px) {
  .client {
    max-width: calc(50% - 30px);
  }
}

@media screen and (max-width: 525px) {
  .client {
    float: none;
    max-width: 260px;
    width: 90%;
  }
  .client-wrap {
    text-align: center;
  }
}

/* Animation */
@-webkit-keyframes fadein {
  from {
    opacity: 0;
    width: 65%;
  }
  to {
    opacity: 1;
    width: 80%;
  }
}

@-moz-keyframes fadein {
  from {
    opacity: 0;
    width: 65%;
  }
  to {
    opacity: 1;
    width: 80%;
  }
}

@-ms-keyframes fadein {
  from {
    opacity: 0;
    width: 65%;
  }
  to {
    opacity: 1;
    width: 80%;
  }
}

@-o-keyframes fadein {
  from {
    opacity: 0;
    width: 65%;
  }
  to {
    opacity: 1;
    width: 80%;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
    width: 65%;
  }
  to {
    opacity: 1;
    width: 80%;
  }
}
            
          
!
            
              $('.no-touch .project-list li:nth-child(3), .no-touch .project-list li:nth-child(8)').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(1)').toggleClass('show-image');
});

$('.no-touch .project-list li:nth-child(4), .no-touch .project-list li:nth-child(9)').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(2)').toggleClass('show-image');
});

$('.no-touch .project-list li:nth-child(5), .no-touch .project-list li:nth-child(9)').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(3)').toggleClass('show-image');
});

$('.no-touch .project-list li:nth-child(6), .no-touch .project-list li:nth-child(10)').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(4)').toggleClass('show-image');
});

$('.no-touch .project-list li:nth-child(7), .no-touch .project-list li:nth-child(11)').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').find('img:nth-child(5)').toggleClass('show-image');
});

// Reset 
$('.touch .client-wrap').click(function(event){
	  var target = $( event.target );
	  if ( target.hasClass( "client-close" ) ) {
		  $('.client-wrap div.client').addClass('reset');
	  }
	  else{
		  $('.client-wrap div.client').removeClass('reset');
	  }
});

// White BG for client top
$('.no-touch .project-list li').hover(function(e) {
  $(this).parents('.client-meta').next('.overflow-wrapper').toggleClass('white-bg');
  $('.touch .client-wrap').toggleClass('.solid');
});

// David Walsh simple lazy loading 
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
  img.setAttribute('src', img.getAttribute('data-src'));
  img.onload = function() {
    img.removeAttribute('data-src');
  };
});

// For the demo 
$('.hover .toggle-switch').click(function(e) {
  $('.hover .toggle-switch').toggleClass('switched-off');
  $('.client-wrap').toggleClass('opacity-focus');
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console