jQuery how to toggle :hover effect?

Using jQuery-3.3.1

I am trying to toggle a hover effect that I have made with scss in laravel 5.

When I hover over the content in my case a cover image of a album, it works the effect.

But I wanted the effect to be active when a checkmark is filled. I am now at a point that I can't add or toggle that hover effect. I tried adding a class but then the effect gets weird.

This is the html code.

<div class="row">
            @foreach($albums as $album)
            <div class="col-lg-2" id="album-">
                <div class="content" id="content">
                  <a id="overlay" >

                    <div class="content-overlay">
                        <div class="col-lg-2">
                            <label class="checkbox_custom">
                                <input type="checkbox" name="checkbox_custom_a" id="">
                                <span class="checkmark"></span>
                            </label>
                        </div>
                    </div>

                    <img href="" class="content-image" src="https://images.unsplash.com/photo-1433360405326-e50f909805b3?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=359e8e12304ffa04a38627a157fc3362">
                    <div class="content-details fadeIn-bottom">
                      <h3 class="content-title"></h3>
                      <p class="content-text"></p>
                    </div>
                  </a>
                </div>
                <br>
            </div>
          @endforeach
    </div>

And this the scss.

  .content {
  position: relative;
  width: 90%;
  max-width: 400px;
  margin: auto;
  overflow: hidden;
}

.content .content-overlay {
  background: rgba(0,0,0,0.7);
  position: absolute;
  height: 99%;
  width: 100%;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out 0s;
  -moz-transition: all 0.4s ease-in-out 0s;
  transition: all 0.4s ease-in-out 0s;
}

.content:hover .content-overlay{
  opacity: 0.6;
}



.content-image{
  width: 100%;
}

.content-details {
  position: absolute;
  text-align: center;
  padding-left: 1em;
  padding-right: 1em;
  width: 100%;
  top: 50%;
  left: 50%;
  opacity: 0;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}

.content:hover .content-details{
  top: 50%;
  left: 50%;
  opacity: 1;
}

.content-details h3{
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.15em;
  margin-bottom: 0.5em;
  text-transform: uppercase;
}

.content-details p{
  color: #fff;
  font-size: 0.8em;
}

And this is the jquery checking if the checkmark of the specific album selected is active.

$( "input" ).change(function() {
            var $input = $( this );
            var checkboxState = $input.prop("checked");

            if(checkboxState == true){
                $("input:checkbox:checked").each(function () {
                    //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());
                    //Cant figure out????
                });
            }

            if(checkboxState == false){
                $("input:checkbox:checked").each(function () {
                    //console.log("Id: " + $input.attr("id") + " Value: " + $input.val());

                });
            }
        }).change();

via Chebli Mohamed