I want to blur the extra image outside a clip area, can I implement this effect by CSS?
Here is mockup of what I want:
You should try it yourself before asking for help. Here you go:
.img-container{ position:relative; float: left; } .blurred-img{ background: url("https://placeholdit.imgix.net/~text?txtsize=28&bg=0099ff&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png") no-repeat; height: 200px; width: 200px; -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); } img{ width: 100px; height: 100px; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
<div class="img-container"> <div class="blurred-img"> </div> <img src="https://placeholdit.imgix.net/~text?txtsize=28&bg=ee09e0&txtclr=ffffff&txt=300%C3%97300&w=300&h=300&fm=png"/> </div>
You should try it yourself before asking for help. Here you go: