Применение эффекта после того как мышка покинула элемент

Нужно реализовать событие, которое по клику должно затемнять блок, но затемнение должно происходить только после того как пользователь кликнул на элемент и мышка покинула блок. Без jQuery.

Код html -

    <div class="main">
    <div class="bgbg"></div>
            <div class="cats_block">
                <div class="title">
                    <h1>Ты сегодня покормил кота?</h1>
                </div>
                <div class="cats_wrap">
                    <div class="cat_item one_cat">
                        <div class="effect">
                            <h4>Сказачное заморское яство</h4>
                        <h2>Нямушка  <span>с фуа-гра</span></h2>
                        <p>10 порций мышь в подарок</p> 
                        <div class="weight">
                            <p>0,5<span>кг</span></p>
                        </div>
                        <img src="img/cat.png">
                        </div>
                    </div>
                    <div class="external_text">
                        <p>Что сидишь? Порадуй котэ, <a href="">купи</a></p>
                    </div>
                </div>
                <div class="cats_wrap">
                    <div class="cat_item one_cat">
                        <div class="effect">
                            <h4>Сказачное заморское яство</h4>
                        <h2>Нямушка  <span>с фуа-гра</span></h2>
                        <p>10 порций мышь в подарок</p> 
                        <div class="weight">
                            <p>2<span>кг</span></p>
                        </div>
                        <img src="img/cat.png">
                        </div>
                    </div>
                    <div class="external_text">
                        <p>Головы щучьи с чесноком да свежайшая семгушка.</p>
                    </div>
                </div>
                <div class="cats_wrap">
                    <div class="cat_item one_cat">
                        <div class="effect">
                            <h4>Сказачное заморское яство</h4>
                        <h2>Нямушка  <span>с фуа-гра</span></h2>
                        <p>10 порций мышь в подарок</p> 
                        <div class="weight">
                            <p>5<span>кг</span></p>
                        </div>
                        <img src="img/cat.png">
                        </div>
                    </div>
                </div>
            </div>
        </div>

Код CSS - 
body {
    position: relative;
    padding: 0;
    margin: 0;
    background-image: url(../img/bg.png);
}
.bgbg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    content: '';
    z-index: -6;
    width: 100%;
    height: 100%;
    opacity: .5;
    background: #000;
}
.title h1 {color: #fff; font-weight: 100; font-size: 45px;}
.main {
    width: 100%;
    height: 100vh;
    position: relative;
    z-index: 6;
}
.cats_block {
    margin: 0 auto;
    height: 530px;
    padding-top: 10%;
}
.title {
    width: 100%;
    text-align: center;
    font-weight: 100;
    margin: 50px 0;
}
.cats_wrap {
    width: 33.33%;
    float: left;
    margin: 0 auto;
    position: relative;
}
.cat_item {
    overflow: hidden;
    margin: 0 40px;
    border: 2px solid;
    padding: 20px 50px 0 50px;
    background-color: #fff;
    color: #000;
    position: relative;
    min-height: 400px;
}
.cat_item:hover {cursor: pointer;}
.cat_item img {
    position: absolute;left: -22px;
}
.weight {
    position: absolute;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    color: #fff;
    text-align: center;
    right: 10px;
    bottom: 10px;
    z-index: 9999;
}
.weight p {
    text-align: center;
    font-size: 45px;
    margin: 0;
}
.weight p span{
    font-size: 20px;
    display: block;
}
.one_cat {
    border-color: blue;
}
.cats_wrap:before {
   top: 0%;
  left: 0%;
  border-bottom: 70px solid #eee;
  border-left: 70px solid transparent;
  -webkit-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  -moz-box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
  box-shadow: 7px 7px 7px rgba(0,0,0,0.3);
}
.cats_wrap:after {
    top: 0%;
  left: 0%;
  border-top: 69px solid #272822; 
  border-right: 69px solid transparent;
}

.one_cat .weight {
    background-color: blue;
}
.external_text {
    color: #fff;
    text-align: center;
    font-size: 15px;
}

.click_effect {
    opacity: .5;
}
.effect {opacity: 1;}

Код JS -

var cat_item = document.querySelectorAll('.cat_item div');

function clickEff() {
    for (var i = 0; i < cat_item.length; i++) {
        cat_item[i].onclick = function(e){
                console.log(e.offsetX)
                    this.classList.toggle('click_effect');
        };
    }
}
clickEff();


window.onload = function () {
    for (var i = 0; i < cat_item.length; i++) {
        cat_item[i].onmouseout = function(e) {
            this.classList.remove('effect');
        }
    }
}