JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<div id="projects">
    <div class="project">
        <img src="http://i.imgur.com/NIEoaUB.jpg">
        
    </div>
    <div class="project">
        <img src="http://i.imgur.com/NIEoaUB.jpg">
    </div>
    <div class="project">
        <img src="http://i.imgur.com/NIEoaUB.jpg">
    </div>
    <div class="project">
        <img src="http://i.imgur.com/NIEoaUB.jpg">
    </div>
    <div class="project">
        <img src="http://i.imgur.com/NIEoaUB.jpg">
    </div>
</div>

CSS

* {
    box-sizing: border-box;
}
#projects.active .project {
    width: 18%;
}
.project {
    width: 20%;
    float: left;
    border-left: 1px solid white;
    overflow: hidden;
    transition: 0.35s all;
    transition-timing-function: linear;
}
.project:first-child {
    border-left: none;
}
.project.active img {
    transition: 0.35s all;
    transition-timing-function: linear;
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}
.project img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}
#projects.active .project.active {
    width: 28%;
}

JavaScript

$(function () {
    var $projects = $("#projects");
    $projects.find(".project").hover(function () {
        $(this).addClass("active");
        $projects.addClass("active");
    }, function () {
        $(this).removeClass("active");
        $projects.removeClass("active");
    });
});