materialize css hover effect not working properly

Question

Trying to add hover effect for the div contain the img with the class: materialboxed

unfortunately, it is not working together. Any ideas? < https://codepen.io/taldevlop/pen/WNvGWqQ?

    <div class="masonry tiles">
                 <div class="col s4 tile gallery item">
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
                         <div class="details">
                             <span class="title">Title</span>
                             <span class="description">Description</span>
                         </div>
                 </div>
             </div>

Answer 1

Ok, several things wrong here:

1) You haven't included jQuery, but you're trying to initialise materialbox with jQuery. So either include jQuery in your project/pen, or use the vanilla JS initialisation as per the documentation.

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.materialboxed');
    var instances = M.Materialbox.init(elems);
  });

  // Or with jQuery

  $(document).ready(function(){
    $('.materialboxed').materialbox();
  });

Here is a codepen using jQuery and fixed up a little.

https://codepen.io/doughballs/pen/zYGowBp

2) If you look at your code, you've got a random image right at the bottom before your scripts:

<div class="masonry tiles">
                     <div class="col s4 tile gallery item">
             <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">
                             <div class="details">
                                 <span class="title">Title</span>
                                 <span class="description">Description</span>
                             </div>
                     </div>
                 </div>
<!-- What is this image? -->
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/216995/1.jpg" alt="" class="materialboxed responsive-img">

3) I took off .responsive-img and instead set .materialboxed to be width: 100%

.materialboxed {
  width:100%;
}

I'm not really sure what you're trying to achieve. Hope this helps in some way.