<div class="animaiton"> </div> <div class="wrapper"> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur ante eget justo consectetur convallis. Donec sollicitudin euismod mauris vitae pulvinar.</div> </div>
html { height: 100%; } body { background-image: url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/0SP70JWWOK.jpg'); background-size: cover; background-position:center center; height:100%; line-height:1.25em; font-family: -apple-system; } .wrapper { position: absolute; top:50%; left:50%; width: 400px; margin-left:-200px; margin-top:-200px; height:400px; -webkit-border-radius: 40px; overflow:hidden; -webkit-transform: translateZ(0px); } .animaiton { position:absolute; top:40%; left:50%; background:red; width:100px; margin-left:-50px; height:100px; -webkit-animation: mymove 3s infinite ease alternate-reverse; animation: mymove 3s infinite ease alternate-reverse; } .wrapper:before{ position: absolute; -webkit-backdrop-filter: blur(12px); content: ''; display:block; top:0; left:0; right:0; bottom:0%; } /* Chrome, Safari, Opera */ @-webkit-keyframes mymove { 0% {left: 50%;} 100% {left: 35%;} } /* Standard syntax */ @keyframes mymove { 0% {left: 50%;} 100% {left: 35%;} } .wrapper > div { background: rgba(0, 0, 0, 0.6); padding: 2em; position:absolute; height:25%; left: 0; right: 0; bottom:0; color:#fff; z-index:2; }