How to apply css to vertically centered element (wordpress)? - css

Question

I'll start by saying that I'm fairly new to css so pardon me if the answer to my question is obvious. I'm looking to apply an effect to the element(s) that are most centered in the screen. I want the user to scroll down and have photos saturate from gray scale.
Here is the page which I'd like the effect to occur on:
http://evanscottpierce.com/portfolio/
The current desktop behavior is to saturate on hover but obviously this doesn't work for mobile, so I'd like saturation to be triggered by scrolling instead. As you can see below, I just applied the gray scale effect to desktop only until I can get the desired behavior for mobile.
Here is the code I have so far:
#media only screen and (min-width:768px){
.gray-scale-img .rl-gallery {
overflow: hidden;
-webkit-backface-visibility: hidden;
}
.gray-scale-img .rl-gallery .rl-gallery-link {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.gray-scale-img .rl-gallery .rl-gallery-link:hover {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
}
Thank you in advance!

Answer 1

Using a helper method to select whether or not the css should be applied and then applying that css with class is pretty clean.
// loop to add sample images
let imageCount = 0;
while (imageCount++ < 10) {
$('body').append('<p><img src="https://picsum.photos/200/100?image=' + imageCount + '" alt="sample image" class="gray-scale-img" ></p>');
}
// helper function to check for vertical centering
function isScrolledIntoCenter(elem)
{
var docViewCenter = $(window).scrollTop() + $(window).height() / 2;
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).height();
return ((elemBottom >= docViewCenter) && (elemTop <= docViewCenter));
}
// function to toggle .in-color based on visibility
function toggleInColor() {
const images = $('img.gray-scale-img');
images.each(function() {
$(this).toggleClass('in-color',isScrolledIntoCenter(this));
});
}
toggleInColor();
$(window).on('scroll', toggleInColor);
.gray-scale-img {
-webkit-backface-visibility: hidden;
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
will-change: filter;
}
.gray-scale-img.in-color {
-webkit-filter: grayscale(0);
filter: grayscale(0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

The simplest way is usages css3 flexbox:
<div class="flex-container">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
<div>Nine</div>
</div>
<style type="text/css">
.flex-container {
display:flex;
height: 200px;
align-items: center;
}
</style>