Let me preface that I'm a noobie to HTML and CSS. That being said, I have this JS Fiddle for a section of my website: https://jsfiddle.net/rharrison2641/sb3rzm9t/2/
CODE.)
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 {
-webkit-filter: brightness(50%);
-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');
}
Essentially what I'm trying to do is dim the background image, Blizzard.jpg, but cause the Blizzard.png logo to not dim and retain its white color. As it stands now, everything works perfectly, but the logo dims to a slight grey color. I've tried placing the image outside of the div with the background image, but it just causes the window resizing to screw up immensely. Can someone propose a work around for this? I've been trying at this for days, so any solutions or help would be greatly appreciated.
