материализация css эффект парения не работает должным образом

Question

Попытка добавить эффект наведения для div содержит img с классом: materialboxed

к сожалению, это не работает вместе. Любые идеи? <<a href="https://codepen.io/taldevlop/pen/WNvGWqQ" rel="nofollow noreferrer">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

Хорошо, здесь несколько вещей не так:

1) Вы не включили jQuery, но вы пытаетесь инициализировать поле материала с помощью jQuery. Так что либо включите jQuery в ваш проект / перо, либо используйте ванильную JS инициализацию согласно документации .

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

  // Or with jQuery

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

Вот кодовый блок, использующий jQuery и исправленный немного вверх.

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

2) Если вы посмотрите на свой код, вы увидите случайное изображение прямо внизу перед вашими сценариями:

<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) Я снял .responsive-img и вместо этого установил для .materialboxed значение width: 100%

.materialboxed {
  width:100%;
}

Я не совсем уверен, чего вы пытаетесь достичь , Надеюсь, это поможет.