zoom sur image

In this example below you will see how to do a zoom sur image with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by valgreg225, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright valgreg225 ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>zoom sur image</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="container">
<ul class="galerie">
  <li class="rot1">
    <a href="#">
      <img src="http://gregoryvallejo.fr/courcp/anim_zoom/img1.jpg" alt="" />
    </a>
  </li>
  <li class="rot2">
    <a href="#">
      <img src="http://gregoryvallejo.fr/courcp/anim_zoom/img2.jpg" alt="" />
    </a>
  </li>
  <li class="rot3">
    <a href="#">
      <img src="http://gregoryvallejo.fr/courcp/anim_zoom/img3.jpg" alt="" />
    </a>
  </li>
</ul>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/valgreg225/zoom-sur-image-akLqqB */
body {
  background-color: #d3d3d3;
}
ul {
  margin-top: 60px;
}
ul.galerie li {
  background-color: #eee;
  float: left;
  margin: 0 7px;
  padding: 10px;
  border: 1px solid #bbb;
  list-style: none;
}

/* le fait d'appliquer une rotation par img, ça enleve le fait que l'image est par dessus les autres */
/* .rot1 {
  transform: rotate(-5deg);
  z-index: 1;
}
.rot2 {
  transform: rotate(3deg);
}
.rot3 {
  transform: rotate(-15deg);
} */
ul.galerie li a img {
  float: left;
  width: 200px;
  transition: transform 0.2s ease-in-out;
}

ul.galerie li a:hover img {
  transform-origin: center;
  transform: scale(1.5) rotate(-10deg);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
  z-index: 10;
}

Comments