Skip to content

Instantly share code, notes, and snippets.

@techanon

techanon/blurred_background_profile_img_demo.html

Last active September 12, 2017 20:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save techanon/7aef0bb122d4ac4e34cd1a785ce66bdd to your computer and use it in GitHub Desktop.
Save techanon/7aef0bb122d4ac4e34cd1a785ce66bdd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
blurred_background_profile_img_demo.html
<!DOCTYPE html>
<html>
<head>
<style>
/* demo purpose only */
body {display:flex; }
/** CSS **/
.blurbox {
--size: 500px;
display: grid;
width:var(--size);
height:var(--size);
position:relative;
overflow:hidden;
}
.blurbox img {
width: 100%;
height: 100%;
opacity: 0;
z-index:1;
position:relative;
}
.blurbox::before, .blurbox::after {
content:"";
background-image: var(--img);
background-repeat: no-repeat;
background-position: center center;
width: 100%;
height: 100%;
position: absolute;
}
.blurbox::before {
z-index:-1;
filter:blur(5px);
background-size: cover;
}
.blurbox::after {
z-index:0;
background-size: contain;
}
</style>
</head>
<body>
<!-- pseudo template-like
<div class="blurbox" style="--img:url( {{ data.imgurl }} );"><img src="{{ data.imgurl }}"></div>
-->
<div class="blurbox" style="--img:url(http://i.imgur.com/pIUsuyE.jpg);"><img src="http://i.imgur.com/pIUsuyE.jpg"></div>
<div class="blurbox" style="--img:url(http://i.imgur.com/WPsf4eg.jpg);"><img src="http://i.imgur.com/WPsf4eg.jpg"></div>
<!-- script to update image -->
<script>
function switchImg(e){
let el = e.currentTarget;
let img = "/path/to/img.jpg";
el.style = "--img:url("+img+")";
el.firstChild.src = img;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment