using material box for card images

[alisabzevari]

I am trying to use material box for card images. My target is to click on card image and view it fullscreen.

<div class="card large hoverable">
    <div class="card-image">
      <img materialize="" class="materialboxed" width="650" src.bind="movie.poster">
    </div>
    <div class="card-content">
      <span class="card-title activator grey-text text-darken-4">${movie.title + " - " + movie.imdbRating}<i class="material-icons right">more_vert</i></span>
      <p>${movie.genre.join(', ')}</p>
    </div>
    <div class="card-reveal">
      <span class="card-title grey-text text-darken-4">${movie.title}<i class="material-icons right">close</i></span>
      <p>${movie.director}</p>
      <p>${movie.genre.join(', ')}</p>
      <p>${movie.actors.join(', ')}</p>
      <p>${movie.plot}</p>
    </div>
  </div>

The problem is that it could not make the image container bigger. So the image will be zoomed but because the container is small it couldn't show all of the image.

[emileae]

I'm getting the same issue and I'm reluctant to modify materialbox.js

[acburst]

Fixed in 37c9d79

If you don't want to remove overflow: hidden yourself, materialbox will now look for ancestors with overflow hidden and remove that attribute and then reset them to their original overflow when you exit out of the materialbox.

[emileae]

Wow, thanks for the super fast response, your latest commit has fixed my issue.

[alisabzevari]

Works like a charm. Thanks!

[z4ki]

is there an example how to remove hidden overlow because i didn't get it