css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <ul class="blocks">
  <li>Vakmanschap<div class="popup"><span><h3>Vakmanschap en ambacht</h3>Ervaring is niet te koop, het is een kwestie van veel doen. Met aandacht en passie. Dat staat bij ons centraal.</span></div></li>
  
  <li>Begeleiding<div class="popup"><span><h3>Begeleiding op het werk</h3>Scholing of diploma’s vormen de basis voor onze collega’s. Het bewijs wordt echter geleverd in de praktijk. Vandaar dat wij onze mensen ook begeleiden tijdens hun werkzaamheden. Zo houden we elkaar scherp en maken we optimaal gebruik van onze kennis, ervaring en talenten.</span></div></li>
  
  <li>Leren van elkaar<div class="popup"><span><h3>Leren van elkaar</h3>Kennis en ervaring delen en vermenigvuldigen houdt ons scherp en slim. Mensen vinden het leuk om ‘weetjes’ te delen, wij stimuleren onze mensen dit te doen, je bent immers nooit te ervaren om te leren.</span></div></li>
  <li>Vaste ploeg<div class="popup"><span><h3>Vaste ploeg</h3>Op elk object werken we met vaste collega’s en ploegen. Ze kennen het pand, de omgeving en de mensen, en kunnen daardoor ‘onzichtbaar’ hun werk doen. Bovendien geeft het uw mensen een vertrouwd gevoel dat er een bekende aan het werk is, die ze ook met een incidenteel verzoek kunnen benaderen.</span></div></li>
  
  <li>RI&E<div class="popup"><span><h3>RI&E</h3>Welzijn, vitaliteit en veiligheid van onze en uw mensen staan centraal. Bij aanvang van ieder nieuw project voeren we samen met onze opdrachtgever een RI&E uit. Daarmee brengen we alle risico’s in kaart, opdat we ons werk veilig en goed kunnen doen. Desgewenst brengen wij advies uit over verbeterpunten, zodat er volgens de regels gewerkt kan worden.</span></div></li>
  
  <li>Direct contact<div class="popup"><span><h3>Direct contact</h3>Glas&Rein is een platte organisatie met korte lijnen. Zowel met onze opdrachtgevers als met onze mensen op locatie. We zijn erop ingesteld om snel in te kunnen spelen op wijzigende omstandigheden en aanvragen. Ons belang is en blijft iedereen tevreden en actief te houden.</span></div></li>
  
  <li>Landelijke dekking<div class="popup"><span><h3>Landelijke dekking</h3>Met onze collega’s kunnen we het grootste deel van Nederland bedienen. Dat doen we altijd onder verantwoordelijkheid van Glas&Rein, en op basis van onze werkwijze. U kunt dus rekenen op landelijke dekking, met regionale aandacht voor uw belangen.</span></div></li>
  
  <li>Gezond verstand<div class="popup"><span><h3>Gezond verstand</h3>Uiteindelijk misschien wel het belangrijkste middel om mee te werken; gezond verstand. Da’s wat we u garanderen. Niet blind werken volgens lijstjes en instructies, maar vooral om je heen kijken en je realiseren of de middelen en handelingen het doel heiligen.</span></div></li>
  
  <li>Kwaliteit<div class="popup"><span><h3>Kwaliteit</h3>Goed werk leveren we met de juiste mensen, middelen en mentaliteit. Dat doen we al jaren, vanuit een sterk netwerk van collega’s en leveranciers. En met één duidelijke bedoeling; schoon = schoon.</span></div></li>
  
  <li>Zorgvuldige opname<div class="popup"><span><h3>Zorgvuldige opname</h3>Tevredenheid begint bij verwachtingen. Daartoe verrichten we voor elk project een zorgvuldige opname van werkzaamheden. Dat doen we buiten spitstijden, opdat we uw proces niet hinderen. Vervolgens proberen we uw verwachtingen te overtreffen.</span></div></li>
  
  <li>Apps<div class="popup"><span><h3>Apps</h3>Werkzaamheden en voortgang kunnen eenvoudig en snel worden geïnventariseerd, geïnstrueerd en gerapporteerd aan de hand van de apps waarmee wij werken. Dat scheelt tijd en biedt duidelijkheid en efficiency in werk, communicatie, evaluatie en administratie.</span></div></li>
  
  <li>Transparantie<div class="popup"><span><h3>Transparantie</h3>Helderheid in werk, proces en administratie vinden we belangrijk. Iedereen moet kunnen zien wat er gedaan is, door wie en wanneer. En of dat volgens plan is geweest, en naar tevredenheid.</span></div></li>
</ul>
            
          
!
            
              @import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700,400italic,700italic);

@background:    #fff;
@block-color:   #2196F3;
@popup-color:   #2196F3;

html,
body {
  font-family:'Noto Sans', serif;
  background-color: @background;
}

.blocks {
  margin: auto;
  max-width:1070px;
  padding:0;
}

.blocks li {
  color: #fff;
  background-color: @block-color;
  cursor:default;
  float:left;
  list-style:none;
  margin:1%;
  padding:60px 0;
  position:relative;
  text-align:center;
  box-shadow: inset 2px 2px 0 lighten(@block-color, 10%);
  text-shadow: 2px 2px 1px darken(@block-color, 20%);
  transition:.5s cubic-bezier(.3,0,0,1.3);
  width:31%;
  border-radius: 4px;
  font-weight: bold;
}

.blocks li:hover {
  transform:scale(.7);
  z-index:3000;
}

.popup {
  background-color: @popup-color;
  color:#fff;
  height: 100%;
  width:100%;
  left:0;
  opacity:0;
  position:absolute;
  top:0;
  padding: 15px;
  border-radius: 4px;
  text-shadow: none;
  transition:.5s cubic-bezier(.3,0,0,1.37);
}

.popup span {
  font-size:12px;
  font-weight: normal;
  left:0;
  padding:15px 25px;
  position:absolute;
  top:50%;
  transform:translateY(-50%);
}

.popup h3 {
  font-size:13px;
  margin:0 0 5px;
  padding:0;
}

.blocks li:hover .popup {
  opacity:1;
  transform:scale(2);
  box-shadow: 0 0 10px 2px rgba(0,0,0,.4);
}
            
          
!
            
              /* Material Grid + Hover 
Trying out a new way to display content on hover...
*/
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console