CSS eye follow

Just an eye that follow the cursor. Only CSS and only for fun. :) What is a css eye follow How do you make a css eye follow? This script and codes were developed by Pedro Campos on 17 December 2021, Friday.

How do I make an css eye follow?
  1. CSS eye follow Previews
  2. CSS eye follow HTML Codes
  3. CSS eye follow CSS Codes
  4. CSS eye follow JS Codes
CSS eye follow Previews

CSS eye follow HTML Codes

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS eye follow</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <div class="control-cnt">

<div class="control hover-1"></div>
<div class="control hover-2"></div>
<div class="control hover-3"></div>
<div class="control hover-4"></div>
<div class="control hover-5"></div>
<div class="control hover-6"></div>
<div class="control hover-7"></div>
<div class="control hover-8"></div>
<div class="control hover-9"></div>
<div class="control hover-10"></div>
<div class="control hover-11"></div>
<div class="control hover-12"></div>
<div class="control hover-13"></div>
<div class="control hover-14"></div>
<div class="control hover-15"></div>
<div class="control hover-16"></div>
<div class="control hover-17"></div>
<div class="control hover-18"></div>
<div class="control hover-19"></div>
<div class="control hover-20"></div>
<div class="control hover-21"></div>
<div class="control hover-22"></div>
<div class="control hover-23"></div>
<div class="control hover-24"></div>
<div class="control hover-25"></div>

<div class="eye">
  <div class="eye-inside-cnt">
    <div class="eye-inside">
      <div class="eye-really-inside"></div>
    </div>
  </div>
</div>

<h1>Where are you little cursor?</h1>

</div>
  
    <script src="js/index.js"></script>

</body>
</html>

CSS eye follow CSS Codes

@import "https://fonts.googleapis.com/css?family=Titillium+Web:200";
body { margin: 0; }
/* control */
.control-cnt {
  position: relative;
  width: 100%; height: 600px;
  min-width: 310px;
  float: left;
  background-color: #45FF95;
}
.control {
  position: relative;
  width: 20%; height: 125px;
  float: left;
  z-index: 10;
}
/* eye */
.eye {
  position: relative;
  width: 300px; height: 300px;
  margin: 150px auto;
  background-color: #ffffff;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
}
/* eye shadows */
.eye:before {
  position: absolute;
  display: block;
  content: '';
  width: 310px;
  height: 150px;
  top: -10px;
  left: -5px;
  -webkit-border-radius: 150px 150px 0 0; -moz-border-radius: 150px 150px 0 0; border-radius: 150px 150px 0 0;
  border-top: 3px solid #39DB80;
}
.eye:after {
  position: absolute;
  display: block;
  content: '';
  width: 304px;
  height: 150px;
  top: 156px;
  left: -2px;
  -webkit-border-radius: 0 0 150px 150px; -moz-border-radius: 0 0 150px 150px; border-radius: 0 0 150px 150px;
  border-bottom: 3px solid #3CED8B;
}
/* blue eye and shadow */
.eye-inside-cnt {
  position: absolute;
  width: 150px; height: 150px;
  margin: 75px;
}
.eye-inside {
  width: 150px; height: 150px;
  background-color: #09C;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
  overflow: hidden;
}
.eye-inside-cnt:before {
  position: absolute;
  display: block;
  content: '';
  width: 156px;
  height: 156px;
  top: -4px;
  left: -4px;
  -webkit-border-radius: 150px; -moz-border-radius: 150px; border-radius: 150px;
  border: 2px solid #E7E7E7;
  border-right: none; border-bottom: none;
}
/* eye inside (black) */
.eye-really-inside {
  width: 100px; height: 100px;
  margin-top: 25px;
  margin-left: 25px;
  background-color: #000;
  -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%;
  -webkit-transition: 0.1s linear; -moz-transition: 0.1s linear; transition: 0.1s linear;
}
/* hovers to change eye-inside position */
/* line 1 */
.hover-1:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 0; }
.hover-2:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 12px; }
.hover-3:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 25px; }
.hover-4:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 37px; }
.hover-5:hover ~ .eye .eye-inside .eye-really-inside { margin-top: -12px; margin-left: 50px; }
/* line 2 */
.hover-6:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: -6px; }
.hover-7:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 12px; }
.hover-8:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 25px; }
.hover-9:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 37px; }
.hover-10:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 12px; margin-left: 56px; }
/* line 3*/
.hover-11:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: -12px; }
.hover-12:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 6px; }
.hover-13:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 25px; }
.hover-14:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 43px; }
.hover-15:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 25px; margin-left: 62px; }
/* line 4 */
.hover-16:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: -6px; }
.hover-17:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 12px; }
.hover-18:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 25px; }
.hover-19:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 37px; }
.hover-20:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 37px; margin-left: 56px; }
/* line 5 */
.hover-21:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 0px; }
.hover-22:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 12px; }
.hover-23:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 25px; }
.hover-24:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 37px; }
.hover-25:hover ~ .eye .eye-inside .eye-really-inside { margin-top: 62px; margin-left: 50px; }
/* text */
h1 {
  font-family: 'Titillium Web', Arial, sans-serif;
  text-align: center;
  color: #45FF95;
}

CSS eye follow JS Codes

/* updated just do add the min-width to .control-cnt */
Do you want hide your ip address?Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup.