LEVEL 2 - 8. TRANSLATE

In this example below you will see how to do a LEVEL 2 - 8. TRANSLATE with some HTML / CSS and Javascript

OBJECTIVE In the img hover state, transform the image by translating it 10px to the right and 20px down. Remember to include appropriate vendor prefixes.

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

<head>
  <meta charset="UTF-8">
  <title>LEVEL 2 - 8. TRANSLATE</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <img src="https://s20.postimg.org/5lh3g3qvx/r2d2.jpg"></img>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/ialtamirano/level-2-8-translate-Aantu */
img {
  border: 10px solid #cfcfb8;
  -webkit-box-shadow: 4px 4px 8px #222222;
  -moz-box-shadow: 4px 4px 8px #222222;
  box-shadow: 4px 4px 8px #222222;
}

img:hover {
}

Comments