How to decrease the size of the image in the card reveal of CSS

Question

On tapping the image, the info reveals itself as shown on this page .

But in my case, the image is quite large, so how do I decrease the size of the image to keep the box small without cropping the image? Or even if cropping occurs also, how to do it?

 <div class="card" style="overflow: visible;"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="https://dummyimage.com/1024x800/000/fff"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> </div> <div class="card-reveal" style="display: none; transform: translateY(0%);"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> 

Answer 1

For your div having class="card" set the width manually to whatever value you want. Without setting the width, it will be 100% of the parent by default.

Also, you must have to include 3 resources in your html for all the functions of materialize.css to work properly:

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet" />

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Look at the demonstration below:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet" /> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" /> <div class="card" style="overflow: visible; width: 30%; margin: 10px auto;"> <div class="card-image waves-effect waves-block waves-light"> <img class="activator" src="https://dummyimage.com/1024x800/000/fff"> </div> <div class="card-content"> <span class="card-title activator grey-text text-darken-4">Card Title<i class="material-icons right">more_vert</i></span> </div> <div class="card-reveal" style="display: none; transform: translateY(0%);"> <span class="card-title grey-text text-darken-4">Card Title<i class="material-icons right">close</i></span> <p>Here is some more information about this product that is only revealed once clicked on.</p> </div> </div> 

Here's the jsfiddle: http://jsfiddle.net/kavc89nh/17/