Почему мой оверлейный оверлей не работает после взлома сайта?

Question

Я нахожусь в процессе восстановления взлома сайта Wordpress, и почти все возвращается к нормальной жизни. Я обратился за профессиональной помощью, чтобы очистить его, заменить файлы и удалить вредоносную программу, и она выглядит хорошо. НО по какой-то причине мой эффект Hover Overlay сейчас не работает.

Я проверил мои footer.php и.css, и оба должны быть в норме. Любой совет?

Вот CSS:

  #image .image:hover .overlay  {

}

 .overlay {
 display:none;
 position: absolute;
 top: 20px;
 left: 20px;
 height: calc(100% - 40px) ;
 width: calc(100% - 40px);
 opacity: 1;
 transition: 1s ease;
 background-color: #008CBA;


}

.overlay-inner{
  position: absolute;
   top: 50%;
   left: 49%;
   transform: translate(-50%, -50%);
  color: white;
  font-size: 1rem;

}

Вот JS, найденный в моем footer.php:

<script type="text/javascript">

jQuery(window).load(function() {
  var container = 
document.querySelector('#imagewrapper');
  var msnry = new Masonry( container, {
    itemSelector: '.image',
    columnWidth: '.image',
  });
$('.overlay').css('visibility', 'visible')
});

var colors = ['blue', 'green', 'pink', 'gray', 
'#F9CD19', '#198CF9', '#C59FF9', '#F86A4A'];

jQuery('.overlay').each(function(index, item) {
  var index = Math.round(Math.random() * 
colors.length - 1);
  jQuery(this).css('background-color', 
colors[index]);
    })


    jQuery('.image').on('mouseover',function(){
      jQuery(this).find('.overlay').show();
    });
    jQuery('.image').on('mouseout',function(){
      jQuery(this).find('.overlay').hide();
    });
</script>

Любые идеи или советы, которыми вы могли бы поделиться?