materialize css hover effect not working properly - materialize

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.