A Pen by Oliver Kühn

Thumbnail
This awesome code was written by 0x04, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0x04 ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Oliver K├╝hn</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .object {
  width: 640px;
  height: 480px;
  object-fit: none;
  object-position: top left;
  transition: object-position 3000ms linear;
}
.object:hover {
  object-position: bottom right;
}

    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>

  <img class="object" src="https://placeimg.com/1280/1024/any">
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/0x04/a-pen-by-oliver-kandxfchn-ELMeNK */
.object {
  width: 640px;
  height: 480px;
  object-fit: none;
  object-position: top left;
  transition: object-position 3000ms linear;
}
.object:hover {
  object-position: bottom right;
}

Comments