small image to big if loaded with blur transition

In this example below you will see how to do a small image to big if loaded with blur transition with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>small image to big if loaded with blur transition </title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

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

  
</head>

<body>

  <div class="bg"></div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/mitsis/small-image-to-big-if-loaded-with-blur-transition-Xazvpd */
:root {
  background-color: black;
  overflow: hidden;
}

.bg {
  height: 100vh;
  background-color: black;
  background-image: url(http://res.mitsis.net/milkywaylasilla-cc@small.png);
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(20px);
          filter: blur(20px);
  -webkit-transform: scale(1.09);
          transform: scale(1.09);
  transition: -webkit-filter 0.7s ease-out;
  transition: filter 0.7s ease-out;
  transition: filter 0.7s ease-out, -webkit-filter 0.7s ease-out;
}
.bg.loaded {
  -webkit-filter: blur(0);
          filter: blur(0);
}


/*Downloaded from https://www.codeseek.co/mitsis/small-image-to-big-if-loaded-with-blur-transition-Xazvpd */

window.onload = function() {
	var bg = document.querySelector(".bg");

	var img = new Image();
	img.src = 'http://res.mitsis.net/milkywaylasilla-cc.jpg';
	img.onload = function() {
		
		console.log("fatty image loaded");
		bg.style.backgroundImage = "url("+img.src+")";
		bg.classList.add("loaded");
	};
	//document.querySelector('.bg').style.backgroundImage = "url('http://res.mitsis.net/milkywaylasilla-cc.jpg')";
};

Comments