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 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.

Quick-add: + add another resource

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.

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.

            
              <html>
  
  <head>
  </head>

<body>
 <h1 class="title">Monster | Hover my eyes</h1>
<h2 class="title"><a href="https://youtu.be/ISvQdRwaefE" target="_blank">video tutorial </a></h2>
 <!-- Begin Image -->
 <!-- Invisible Box-->
 <div class="box">
   

   <div class="body"></div> <!-- end of body -->
   <!-- ears -->
     <div class="ear-left">
       <div class="ear-left-spot-1"></div>
       <div class="ear-left-spot-2"></div>
       <div class="ear-left-spot-3"></div>
     </div>
     <div class="ear-right">
       <div class="ear-right-spot-1"></div>
       <div class="ear-right-spot-2"></div>
       <div class="ear-right-spot-3"></div>
     </div>
   
   <!-- eyes -->
   <div class="eye-left">
     <div class="inner-eye"></div>
     <div class="pupil-1"></div>
     <div class="pupil-2"></div>
   </div>
   <div class="eye-right">
     <div class="inner-eye"></div>
     <div class="pupil-1"></div>
     <div class="pupil-2"></div>
   </div>
   
   <!-- hands -->
   <div class="hand-left">
     <div class="hand-toe-left-1"></div>
     <div class="hand-toe-left-2"></div>
   </div>
   <div class="hand-right">
     <div class="hand-toe-right-1"></div>
     <div class="hand-toe-right-2"></div>
   </div>
   
   <!-- mouth, teeth, tognue -->
   <div class="mouth">
     <div class="mouth-copy"></div>
     <div class="tognue">
       <div class="tognue-spot-1"></div>
       <div class="tognue-spot-2"></div>
       <div class="tognue-spot-3"></div>
       <div class="tognue-spot-4"></div>
     </div>
     <div class="tooth-1"></div>
     <div class="tooth-2"></div>
     <div class="tooth-3"></div>
   </div> 
   
   <!-- belly -->
   <div class="belly"></div>
   
   <!-- spots in the body -->
   <div class="spot-body-1"></div>
   <div class="spot-body-2"></div>
   <div class="spot-body-3"></div>
   <div class="spot-body-4"></div>
   <div class="spot-body-5"></div>
   <div class="spot-body-6"></div>
   <div class="spot-body-7"></div>
   
   <!-- feet -->
   <div class="foot-left">
     <div class="foot-toe-left-1"></div>
     <div class="foot-toe-left-2"></div>
     <div class="foot-toe-left-3"></div>
     
     <div class="spot-foot-left-1"></div>
     <div class="spot-foot-left-2"></div>
     <div class="spot-foot-left-3"></div>
     <div class="spot-foot-left-4"></div>
     <div class="spot-foot-left-5"></div>
     <div class="spot-foot-left-6"></div>
     <div class="spot-foot-left-7"></div>    
   </div>
   <div class="foot-right">
     <div class="foot-toe-right-1"></div>
     <div class="foot-toe-right-2"></div>
     <div class="foot-toe-right-3"></div>
     
     <div class="spot-foot-right-1"></div>
     <div class="spot-foot-right-2"></div>
     <div class="spot-foot-right-3"></div>
     <div class="spot-foot-right-4"></div>
     <div class="spot-foot-right-5"></div>
     <div class="spot-foot-right-6"></div>
     <div class="spot-foot-right-7"></div>
   </div>
   
 </div> <!-- End Invisible Box -->
  

  
  
  
  <div> <!-- for footer -->
      <h5 id="footer" class="title"><a href="http://www.eleftheriabatsou.com" target="_blank">Eleftheria</a> | <a href="https://codepen.io/EleftheriaBatsou" target="_blank">Projects</a> | <a href="https://www.youtube.com/channel/UCC-WwYv3DEW7Nkm_IP6VeQQ" target="_blank"> Coding videos </a></h5>
    </div> <!-- end footer -->
  
</body>
</html>
            
          
!
            
              $black: #000;
$white: #fff;
$bg-color: linear-gradient(120deg, #fccb90 0%, #d57eeb 100%);

$body:#fcd00c; //yellow
$ears:#934b21; //brown
$ears-border:#663313; //dark-brown
$eye: linear-gradient(to bottom, #f83600 0%, #f9d423 100%);
$inner-eye: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
$hover-eye: linear-gradient(to top, #fcc5e4 0%, #fda34b 15%, #ff7882 35%, #c8699e 52%, #7046aa 71%, #0c1db8 87%, #020f75 100%);
$hand:#c19e2f;
$belly: #fcdc44;
$spots:#987d2e;
$tognue: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
$tognue-spots:#991b1e;

.title{text-align: center;}

#footer a:link{color:black}
#footer a:visited{color:black}
#footer a:hover{color: $tognue-spots}

body{background: $bg-color;}

.box{  
  position: relative;
  margin: auto;
  display: block;
  /*optional background or border*/
  //border: solid 4px red;
  
  margin-top: 2%;
  width: 630px;
  height: 500px;
  background: none;
}

.body{
  position: absolute;
  top: 5%;
  left: 25%;
  width: 55%;
  height: 85%;
  background: $body;
  border-radius: 40%;
  //need this for the hands
  z-index: 1;
  
  -webkit-clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}

.ear-left{
  position: absolute;
  top: -5%;
  left: 29%;
  width: 20%;
  height: 30%;
  background: $ears;
  border-radius: 50%;
  z-index: 2;
  
    -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg); 
  transform: rotate(-30deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ear-right{
  position: absolute;
  top: -5%;
  right: 24%;
  width: 20%;
  height: 30%;
  background: $ears;
  border-radius: 50%;
  z-index: 2;
  
    -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg); 
  transform: rotate(30deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ear-left-spot-1{
  position: absolute;
  top: 5%;
  left: 35%;
  width: 20%;
  height: 30%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg); 
  transform: rotate(90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ear-left-spot-2{
  position: absolute;
  top: 25%;
  left: 30%;
  width: 20%;
  height: 30%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg); 
  transform: rotate(90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ear-left-spot-3{
  position: absolute;
  top: 55%;
  left: 30%;
  width: 20%;
  height: 50%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg); 
  transform: rotate(90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.ear-right-spot-1{
  position: absolute;
  top: 5%;
  right: 35%;
  width: 20%;
  height: 30%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ear-right-spot-2{
  position: absolute;
  top: 25%;
  right: 30%;
  width: 20%;
  height: 30%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.ear-right-spot-3{
  position: absolute;
  top: 55%;
  right: 30%;
  width: 20%;
  height: 50%;
  background: $ears-border;
  border-radius: 50%;
  
  -ms-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg); 
  transform: rotate(-90deg);
  
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.eye-left{
  position: absolute;
  top: 26%;
  left: 37%;
  width: 12%;
  height: 14%;
  background: $eye;
  border: solid 12px $white;
  border-radius: 50%;
  z-index: 1;
}

.eye-left:hover, .eye-right:hover{
  transform: scale(1.1);
  background: $hover-eye;
}

.eye-right{
  position: absolute;
  top: 26%;
  right: 32%;
  width: 12%;
  height: 14%;
  background: $eye;
  border: solid 12px $white;
  border-radius: 50%;
  z-index: 1;
}
.inner-eye{
  position: absolute;
  top: 20%;
  left: 21%;
  width: 62%;
  height: 64%;
  background: $inner-eye;
  border-radius: 50%;
}
.pupil-1{
  position: absolute;
  top: 27%;
  left: -4%;
  width: 19%;
  height: 19%;
  background: $white;
  border-radius: 50%;
}
.pupil-2{
  position: absolute;
  top: 13%;
  left: 17%;
  width: 25%;
  height: 25%;
  background: $white;
  border-radius: 50%;
}

/////////
// hands 
////////

.hand-left{
  position: absolute;
  top: 34%;
  left: 12%;
  width: 30%;
  height: 12%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg); 
  transform: rotate(30deg);
}
.hand-right{
  position: absolute;
  top: 34%;
  right: 9%;
  width: 30%;
  height: 12%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(-30deg);
  -webkit-transform: rotate(-30deg); 
  transform: rotate(-30deg);
}

.hand-toe-left-1{
  position: absolute;
  top: 0%;
  left: 9%;
  width: 50%;
  height: 72%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg); 
  transform: rotate(35deg);
}
.hand-toe-left-2{
  position: absolute;
  top: 30%;
  left: 9%;
  width: 50%;
  height: 72%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg); 
  transform: rotate(-35deg);
}

.hand-toe-right-1{
  position: absolute;
  top: 0%;
  right: 9%;
  width: 50%;
  height: 72%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(-35deg);
  -webkit-transform: rotate(-35deg); 
  transform: rotate(-35deg);
}
.hand-toe-right-2{
  position: absolute;
  top: 30%;
  right: 9%;
  width: 50%;
  height: 72%;
  background: $hand;
  border-radius: 50%;
  
  -ms-transform: rotate(35deg);
  -webkit-transform: rotate(35deg); 
  transform: rotate(35deg);
}

//mouth 
.mouth{
  position: absolute;
  top: 49%;
  left: 38%;
  width: 30%;
  height: 32%;
  background: $black;
  z-index: 1;
  
  -webkit-clip-path: circle(50% at 50% 4%);
  clip-path: circle(50% at 50% 4%);
}
.mouth-copy{
  position: absolute;
  top: -9%;
  left: 6%;
  width: 70%;
  height: 42%;
  background: $body;
  z-index: 1;
  
  -webkit-clip-path: circle(50% at 50% 4%);
  clip-path: circle(50% at 50% 4%);
}
.tognue{
  position: absolute;
  top: 23%;
  left: 10%;
  width: 80%;
  height: 42%;
  background: $tognue;
  z-index: 1;
  
  -webkit-clip-path: circle(50% at 50% 98%);
clip-path: circle(50% at 50% 98%);
}

.tognue-spot-1{
  position: absolute;
  top: 23%;
  left: 40%;
  width: 7%;
  height: 10%;
  background: $tognue-spots;
  border-radius: 50%;
  z-index: 1;
}
.tognue-spot-2{
  position: absolute;
  top: 13%;
  left: 50%;
  width: 5%;
  height: 8%;
  background: $tognue-spots;
  border-radius: 50%;
  z-index: 1;
}
.tognue-spot-3{
  position: absolute;
  top: 33%;
  left: 20%;
  width: 7%;
  height: 10%;
  background: $tognue-spots;
  border-radius: 50%;
  z-index: 1;
}
.tognue-spot-4{
  position: absolute;
  top: 43%;
  left: 25%;
  width: 4%;
  height: 7%;
  background: $tognue-spots;
  border-radius: 50%;
  z-index: 1;
}

.tooth-1{
  position: absolute;
  top: 0%;
  left: 4%;
  width: 10%;
  height: 16%;
  background: $white;
  z-index: 1;
  
  -webkit-clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.tooth-2{
  position: absolute;
  top: 0%;
  left: 70%;
  width: 10%;
  height: 16%;
  background: $white;
  z-index: 1;
  
  -webkit-clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}
.tooth-3{
  position: absolute;
  top: 0%;
  left: 80%;
  width: 10%;
  height: 16%;
  background: $white;
  z-index: 1;
  
  -webkit-clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%);
}

.belly{
  position: absolute;
  top: 69%;
  left: 38%;
  width: 30%;
  height: 16%;
  background: $belly;
  border-radius: 50%;
  z-index: 1;
}

//spots
.spot-body-1{
  position: absolute;
  top: 29%;
  left: 33%;
  width: 3%;
  height: 6%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-2{
  position: absolute;
  top: 39%;
  left: 36%;
  width: 2%;
  height: 3%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-3{
  position: absolute;
  top: 25%;
  right: 29%;
  width: 3%;
  height: 6%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-4{
  position: absolute;
  top: 43%;
  left: 34%;
  width: 3%;
  height: 6%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-5{
  position: absolute;
  top: 69%;
  left: 73%;
  width: 3%;
  height: 4%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-6{
  position: absolute;
  top: 62%;
  left: 70%;
  width: 3%;
  height: 4%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-body-7{
  position: absolute;
  top: 64%;
  left: 73%;
  width: 3%;
  height: 4%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}

.foot-left{
  position: absolute;
  top: 78%;
  left: 31%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}
.foot-right{
  position: absolute;
  top: 78%;
  right: 28%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}

.foot-toe-left-1{
  position: absolute;
  bottom: 78%;
  left: 28%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}
.foot-toe-left-2{
  position: absolute;
  bottom: 78%;
  left: 48%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}
.foot-toe-left-3{
  position: absolute;
  bottom: 78%;
  left: 68%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}

.foot-toe-right-1{
  position: absolute;
  bottom: 78%;
  right: 28%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}
.foot-toe-right-2{
  position: absolute;
  bottom: 78%;
  right: 48%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}
.foot-toe-right-3{
  position: absolute;
  bottom: 78%;
  right: 68%;
  width: 20%;
  height: 26%;
  background: $hand;
  border-radius: 50%;
  z-index: 1;
}

//spots left
.spot-foot-left-1{
  position: absolute;
  top: 64%;
  left: 63%;
  width: 23%;
  height: 24%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-2{
  position: absolute;
  top: 44%;
  left: 53%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-3{
  position: absolute;
  top: 34%;
  left: 63%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-4{
  position: absolute;
  top: 14%;
  left: 33%;
  width: 9%;
  height: 9%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-5{
  position: absolute;
  top: 40%;
  left: 23%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-6{
  position: absolute;
  top: 64%;
  left: 13%;
  width: 10%;
  height: 10%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-left-7{
  position: absolute;
  top: 2%;
  left: 72%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}

//spots right
.spot-foot-right-1{
  position: absolute;
  top: 34%;
  right: 61%;
  width: 20%;
  height: 20%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-2{
  position: absolute;
  top: 44%;
  right: 53%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-3{
  position: absolute;
  top: 34%;
  right: 33%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-4{
  position: absolute;
  top: 4%;
  right: 33%;
  width: 9%;
  height: 9%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-5{
  position: absolute;
  top: 80%;
  right: 23%;
  width: 13%;
  height: 14%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-6{
  position: absolute;
  top: 64%;
  right: 13%;
  width: 10%;
  height: 10%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
.spot-foot-right-7{
  position: absolute;
  top: 12%;
  right: 72%;
  width: 7%;
  height: 7%;
  background: $spots;
  border-radius: 50%;
  z-index: 2;
}
            
          
!
999px
Loading ..................

Console