Ukázka jak aplikovat filtr na obrázek, který je na pozadí.
HTML
<section class="FutureGoals">
<div class="BlizzBox">
<div class="Blizzard1">
<img alt="BlizzPop" src="https://s8.postimg.cc/5avnnvurp/Blizz_Pop.png" class="BlizzPop">
</div>
</div>
</section>
CSS
.FutureGoals {
height: 100vh;
overflow: hidden;
}
.BlizzBox {
height: 100vh;
overflow: hidden;
}
.Blizzard1 {
background: url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
background-repeat: no-repeat;
background-position: 75%;
background-attachment: fixed;
height: 100%;
width: 100%;
transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-webkit-transition: all .5s ease;
-o-transition: all .5s ease;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.Blizzard1:hover {
background:linear-gradient(0deg, rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://s8.postimg.cc/g96x696k3/Blizzard.jpg);
background-repeat: no-repeat;
background-position: 75%;
background-attachment: fixed;
webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
-moz-transform: scale(1.1);
-webkit-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}
.BlizzPop {
position: relative;
height: auto;
width: 30%;
left: 25%;
top: 9%;
z-index: 1;
transition: all .7s ease;
-moz-transition: all .7s ease;
-ms-transition: all .7s ease;
-webkit-transition: all .7s ease;
-o-transition: all .7s ease;
}
.Blizzard1:hover .BlizzPop {
z-index: 1;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
-o-transform: scale(1.5);
-ms-transform: scale(1.5);
transform: scale(1.5);
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand')";
filter: progid:DXImageTransform.Microsoft.Matrix(M11=1.5, M12=0, M21=0, M22=1.5, SizingMethod='auto expand');
}