cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
              .word.word-design
  .lettre.lettre-D
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-9
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-10
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-11
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-12
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-I
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-9
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-G
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-9
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-10
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-11
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-I.bis
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-9
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-T
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-A
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-9
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-10
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-11
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-12
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
  .lettre.lettre-L
    .big-carre.big-carre-1
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-2
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-3
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-4
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-5
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-6
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-7
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
    .big-carre.big-carre-8
      .little-carre.little-carre-1
      .little-carre.little-carre-2
      .little-carre.little-carre-3
      .little-carre.little-carre-4
            
          
!
            
              body { background: #000000
	; }

.word {
	position: absolute;
	top: 40%; left: 50%;
	height: 5vw; width: 32vw;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}
.lettre {
	position: absolute;
	top:; left:;
	height: 5vw; width: 4vw;
}
.lettre .big-carre {
    transform: scale(0.75);
    -ms-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -webkit-transform: scale(0.75);
    height: 1vw; width:1vw;
}
.lettre .big-carre .little-carre {
	background-color: white;
	position: relative;
	height: 0.5vw; width: 0.5vw;
}
.lettre .big-carre .little-carre.little-carre-3, 
.lettre .big-carre .little-carre.little-carre-4 { 
	top:-1vw; left:0.5vw;
}


.lettre .big-carre { position: relative; }

.lettre-D .big-carre-6 { top:-1vw; left:+1vw; }
.lettre-D .big-carre-7 { top:-2vw; left:+2vw; }
.lettre-D .big-carre-8 { top:-4vw; left:+3vw; }
.lettre-D .big-carre-9 { top:-6vw; left:+3vw; }
.lettre-D .big-carre-10 { top:-8vw; left:+3vw; }
.lettre-D .big-carre-11 { top:-10vw; left:+2vw; }
.lettre-D .big-carre-12 { top:-11vw; left:+1vw; }

.lettre-I { left: 5vw; }
.lettre-I .big-carre-1,
.lettre-I .big-carre-2,
.lettre-I .big-carre-3,
.lettre-I .big-carre-4,
.lettre-I .big-carre-5 {			left:1vw; }
.lettre-I .big-carre-6 { top:-1vw; }
.lettre-I .big-carre-7 { top:-2vw;	left:+2vw; }
.lettre-I .big-carre-8 { top:-7vw; }
.lettre-I .big-carre-9 { top:-8vw;	left:+2vw; }

.lettre-G { left: 9vw; }
.lettre-G .big-carre-1 {			left:1vw;}
.lettre-G .big-carre-2,
.lettre-G .big-carre-3,
.lettre-G .big-carre-4 {}
.lettre-G .big-carre-5 {			left:1vw; }
.lettre-G .big-carre-6 { top:-1vw; 	left:+2vw; }
.lettre-G .big-carre-7 { top:-3vw;	left:+3vw; }
.lettre-G .big-carre-8 { top:-5vw;	left:+3vw; }
.lettre-G .big-carre-9 { top:-6vw;	left:+2vw; }
.lettre-G .big-carre-10 { top:-9vw;	left:+2vw; }
.lettre-G .big-carre-11 { top:-10vw;left:+3vw; }

.lettre-I.bis { left: 14vw; }

.lettre-T { left: 18vw; }
.lettre-T .big-carre-2,
.lettre-T .big-carre-3,
.lettre-T .big-carre-4,
.lettre-T .big-carre-5 {			left:+1.5vw; }
.lettre-T .big-carre-6 { top:-5vw; 	left:+1vw; }
.lettre-T .big-carre-7 { top:-6vw;	left:+2vw; }
.lettre-T .big-carre-8 { top:-7vw;	left:+3vw; }

.lettre-A { left: 22.5vw; }
.lettre-A .big-carre-1 {			left:1vw;}
.lettre-A .big-carre-2,
.lettre-A .big-carre-3,
.lettre-A .big-carre-4,
.lettre-A .big-carre-5 {}
.lettre-A .big-carre-6 { top:-3vw; left:+1vw; }
.lettre-A .big-carre-7 { top:-4vw; left:+2vw; }
.lettre-A .big-carre-8 { top:-3vw; left:+3vw; }
.lettre-A .big-carre-9 { top:-5vw; left:+3vw; }
.lettre-A .big-carre-10 { top:-7vw; left:+3vw; }
.lettre-A .big-carre-11 { top:-9vw; left:+3vw; }
.lettre-A .big-carre-12 { top:-11vw; left:+2vw; }

.lettre-L { left: 27.5vw; }
.lettre-L .big-carre-1,
.lettre-L .big-carre-2,
.lettre-L .big-carre-3,
.lettre-L .big-carre-4,
.lettre-L .big-carre-5 {}
.lettre-L .big-carre-6 { top:-1vw; left:+1vw; }
.lettre-L .big-carre-7 { top:-2vw; left:+2vw; }
.lettre-L .big-carre-8 { top:-3vw; left:+3vw; }





/* ANIMATION */
.big-carre, .little-carre {
	-webkit-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
	-moz-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
	-o-transition: 1.5s cubic-bezier(.17,.67,0,1.34);
    transition: 1.5s cubic-bezier(.17,.67,0,1.34);
}


.lettre-D:hover .little-carre { background-color: #D136B5; }
.lettre-D:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-D:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-D:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-D:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-D:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-D:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-D:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-D:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-D:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-D:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-D:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-D:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-D:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-D:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-D:hover .big-carre-11 { transform: translate(+5vw,-7vw); }
.lettre-D:hover .big-carre-12 { transform: translate(+3vw,-10vw); }


.lettre-I:hover .little-carre { background-color: orange }
.lettre-I:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-I:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-I:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-I:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-I:hover .big-carre-1 { transform: translate(-3vw,-10vw); }
.lettre-I:hover .big-carre-2 { transform: translate(-5vw,-7vw); }
.lettre-I:hover .big-carre-3 { transform: translate(-8vw,-4vw); }
.lettre-I:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-I:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-I:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-I:hover .big-carre-7 { transform: translate(+4vw,-6vw); }
.lettre-I:hover .big-carre-8 { transform: translate(+9vw,+9vw); }
.lettre-I:hover .big-carre-9 { transform: translate(+7vw,+3vw); }


.lettre-G:hover .little-carre { background-color: cyan; }
.lettre-G:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-G:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-G:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-G:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-G:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-G:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-G:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-G:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-G:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-G:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-G:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-G:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-G:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-G:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-G:hover .big-carre-11 { transform: translate(+5vw,-7vw); }


.lettre-I.bis:hover .little-carre { background-color: #B83B3B; }
.lettre-I.bis:hover .little-carre-1 { transform: translate()1vw,-4vw);}
.lettre-I.bis:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-I.bis:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-I.bis:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-I.bis:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-I.bis:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-I.bis:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-I.bis:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-I.bis:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-I.bis:hover .big-carre-6 { transform: translate(-6vw,+7vw); }
.lettre-I.bis:hover .big-carre-7 { transform: translate(+8vw,-4vw); }
.lettre-I.bis:hover .big-carre-8 { transform: translate(+5vw,-7vw); }
.lettre-I.bis:hover .big-carre-9 { transform: translate(+3vw,+10vw); }


.lettre-T:hover .little-carre { background-color: #E0D024; }
.lettre-T:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-T:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-T:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-T:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-T:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-T:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-T:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-T:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-T:hover .big-carre-5 { transform: translate(+8vw,-5vw); }
.lettre-T:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-T:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-T:hover .big-carre-8 { transform: translate(+5vw,+5vw); }


.lettre-A:hover .little-carre { background-color: #24C729; }
.lettre-A:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-A:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-A:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-A:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-A:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-A:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-A:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-A:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-A:hover .big-carre-5 { transform: translate(-8vw,+5vw); }
.lettre-A:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-A:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-A:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
.lettre-A:hover .big-carre-9 { transform: translate(+7vw,+3vw); }
.lettre-A:hover .big-carre-10 { transform: translate(+8vw,-4vw); }
.lettre-A:hover .big-carre-11 { transform: translate(+5vw,-7vw); }
.lettre-A:hover .big-carre-12 { transform: translate(+3vw,-10vw); }


.lettre-L:hover .little-carre { background-color: #3B36D1; }
.lettre-L:hover .little-carre-1 { transform: translate(-1vw,-4vw); }
.lettre-L:hover .little-carre-2 { transform: translate(-2vw,+3vw); }
.lettre-L:hover .little-carre-3 { transform: translate(+3vw,-2vw); }
.lettre-L:hover .little-carre-4 { transform: translate(+4vw,+1vw); }
.lettre-L:hover .big-carre-1 { transform: translate(-7vw,-7vw); }
.lettre-L:hover .big-carre-2 { transform: translate(-8vw,-6vw); }
.lettre-L:hover .big-carre-3 { transform: translate(-9vw,-4vw); }
.lettre-L:hover .big-carre-4 { transform: translate(-10vw,+3vw); }
.lettre-L:hover .big-carre-5 { transform: translate(+8vw,-5vw); }
.lettre-L:hover .big-carre-6 { transform: translate(+6vw,-7vw); }
.lettre-L:hover .big-carre-7 { transform: translate(-4vw,+6vw); }
.lettre-L:hover .big-carre-8 { transform: translate(+5vw,+5vw); }
            
          
!
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