Code: Romantic Image Zoom Effect

Simple zooming the images is not interesting anymore. Therefore, it is essential to make it more flexible and more beautiful. This code is for you to zoom in any image when the mouse pointer comes through it. It is zoomed with a constant rate. Enjoy it!

<!-- this script got from www.cssfreecode.com -->
<html><head>
<script src='http://cssfreecode.com/view/files/prefixfree.min.js'></script>
<style class="cp-pen-styles">body {
  background: #111111;
  background-image: url("http://cssfreecode.com/view/files/1125_a.png");
  background-size: cover;
}

.frame {
  background-image: url("http://cssfreecode.com/view/files/1125_a.png");
  border-radius: 3px;
  box-shadow: 0 0 50px black;
  height: 698px;
  left: 50%;
  margin-bottom: 300px;
  overflow: hidden;
  position: relative;
  top: 100px;
  transform: translateX(-50%);
  width: 550px;
}

img {
  position: absolute;
  transform-origin: 50%;
  width: 100%;
  transition: 2s ease;
}

.frame:hover .pic1 {
  transform: scale(1.2);
  -webkit-filter: blur(4px);
}
.frame:hover .pic2 {
  transform: scale(1.4);
  -webkit-filter: blur(2px);
}
.frame:hover .pic3 {
  transform: scale(1.6);
  -webkit-filter: blur(1px);
}
.frame:hover .pic4 {
  transform: scale(1.8);
}
.frame:hover .pic5 {
  transform: scale(2);
}
.frame:hover .mist {
  transform: translateX(-100%);
}
.frame:hover .mist2 {
  transform: translateX(100%);
}

.mist {
  height: 200px;
  position: absolute;
  top: 500px;
  width: 2000px;
  -webkit-filter: blur(2px);
  transition: 60s linear;
}

.mist2 {
  height: 200px;
  position: absolute;
  top: 300px;
  left: -100%;
  width: 2000px;
  -webkit-filter: blur(2px);
  transition: 60s linear;
}
</style></head><body>
<div class="frame">
 <img src="http://cssfreecode.com/view/files/1125_a.png" alt="sky" class="pic1"/>
 <img src="http://cssfreecode.com/view/files/1125_b.png" alt="sky" class="pic2"/>
 <img src="http://cssfreecode.com/view/files/1125_c.png" alt="sky" class="pic3"/>
  <img src="http://cssfreecode.com/view/files/1125_d.png" alt="sky" class="mist2"/>
 <img src="http://cssfreecode.com/view/files/1125_e.png" alt="sky" class="pic4"/>
  <img src="http://cssfreecode.com/view/files/1125_f.png" alt="sky" class="mist"/>
 <img src="http://cssfreecode.com/view/files/1125_g.png" alt="sky" class="pic5"/>
</div>
</body></html>
<font face="Tahoma"><a target="_blank" href="http://www.cssfreecode.com/"><span style="font-size: 8pt; text-decoration: none">CSS Free Code</span></a></font>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

CSS Best Codes

Code: Romantic Image Zoom Effect

You can leave comments once you sign in/up.

Links