Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html><html><head><meta charset="utf-8"></head>
<body>
  <div class="box">
    <div class="boxcont">
      <a href="#">
        <div></div>
      </a>
    </div>
  </div>
</body></html>
 
html { overflow-y: scroll; }
​
.box {
  position: relative;
  width: 100%;
  background: blue;
  overflow: hidden;
}
.box::before {
  content: "";
  display: block;
  padding-top: 100%;
}
.boxcont {
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}
a div {
  width: 100%;
  height: 100%;
}
​
a::before, a::after, a div::before, a div::after {
  content: "";
  position: absolute;
  background: red;
  pointer-events: none;
  transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; }
a::before {
  left: 0;
  top: 0;
  width: 0%;
  height: 4%;
}
a::after {
  right: 0;
  top: 0;
  width: 4%;
  height: 0%;
}
a div::before {
  right: 0;
  bottom: 0;
  width: 0%;
  height: 4%;
}
a div::after {
  left: 0;
  bottom: 0;
  width: 4%;
  height: 0%;
}
a:hover::before, a div:hover::before {
  width: 100%;
}
a:hover::after, a div:hover::after {
  height: 100%;
}
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers