hoberImg

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

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

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

  
</head>

<body>

  


<div class="shrink pic">
  <img src="http://lorempixel.com/300/300/nightlife/4" alt="city">
</div>

<h2 id="demo01">1. Zoom In #1</h2>
	<div class="hover01 column">
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic01.jpg" /></figure>
			<span>Hover</span>
		</div>
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic02.jpg" /></figure>
			<span>Hover</span>
		</div>
		<div>
			<figure><img src="http://nxworld.net/codepen/css-image-hover-effects/pic03.jpg" /></figure>
			<span>Hover</span>
		</div>
	</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/Ferencok/hoberimg-pNGodq */

• {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}
 
.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;
  
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}

/*SHRINK*/
.shrink img {
  height: 400px;
  width: 400px;
 
  -webkit-transition: all 1s ease;
     -moz-transition: all 1s ease;
       -o-transition: all 1s ease;
      -ms-transition: all 1s ease;
          transition: all 1s ease;
}
 
.shrink img:hover {
  width: 300px;
  height: 300px;
}

Comments