JSFiddle - React, Tailwind, and code Playground

by Matt Bow

HTML

<div class="container">
<div class="hero">
    <img class="hero__background" src="http://images.northrup.org/picture/xl/rabbit/rabbit-18.jpg">
      <h1 class="hero__title">no blur</h1>
</div>
<div class="hero">
    <img class="hero__background blur" src="http://images.northrup.org/picture/xl/rabbit/rabbit-18.jpg">
      <h1 class="hero__title">blur, no transform, bad perf <br>(desired look)</h1>
</div>
<div class="hero">
    <img class="hero__background blur wtransform" src="http://images.northrup.org/picture/xl/rabbit/rabbit-18.jpg">
      <h1 class="hero__title">with transform, weirdness on edge</h1>
</div>
<div class="hero">
    <div class="hero__background blur wtransform"><img src="http://images.northrup.org/picture/xl/rabbit/rabbit-18.jpg"></div>
      <h1 class="hero__title">blur container with transform, weirdness on edge</h1>
</div>
</div>

CSS

.container{
    background-color:black;
}
.hero {
  position: relative;
  width: 100%;
  height:100px;
  overflow: hidden; 
}
.hero img{
  position: absolute;
    left: -50%;
    top:-200px;
    width: 200%; 
}
.blur{
    -webkit-filter: blur(20px);
}
.wtransform{
    -webkit-transform: translate3d(0, 0, 0);
}
.hero__title {
    position: relative;
    text-align: center;
    font-size: 1em;
}