CSS Cropped Image Expand OnClick?

Question

Novice: Need help knowing which coding style and some terms to direct me to what I want to do.

I have images cropped by the lower half on the main page using CSS

.crop_container {
    position:relative;
    text-align:center;
}

.crop_img {
    max-height:150px;
    overflow:hidden;
}

Then the images are full on the individual page.

What I want instead is to click to expand the cropping.
Seems like I have seen it done but not sure if it was jquery or bootstrap or...

My primary code is HTML, PHP and CSS and some JS.
Any direction and terms would help a lot.

Answer 1

I think that Bootstrap and jQuery don't have a ready solution for it but maybe the following examples could help you.

without animations (no need of getting the real height of the image)

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    $(event.target).closest('.image-preview').toggleClass('expanded');
  }

});

.image-preview {
  width: 100%;
  max-height: 150px;
  cursor: pointer;
  overflow: hidden;
}

.image-preview.expanded {
  max-height: initial;
}

.image-preview img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=This+is+an+example" alt="example" />
</div>
<p>Here will stay some text ...</p>

with animations

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    var imagePreview = $(event.target).closest('.image-preview');
    var height = imagePreview.data('preview-height');

    imagePreview.toggleClass('expanded');

    if (imagePreview.hasClass('expanded')) {
      height = imagePreview.find('img').height();
    }

    imagePreview.css('height', height);
  }

});

.image-preview {
  width: 100%;
  height: 150px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.image-preview img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!" data-preview-height="150">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=This+is+an+example" alt="example" />
</div>
<p>Here will stay some text ...</p>

with overlay - no animation

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    $(event.target).closest('.image-preview').toggleClass('expanded');
  }

});

.image-preview {
  position: relative;
  width: 100%;
  max-height: 150px;
  cursor: pointer;
  overflow: hidden;
}

.image-preview.expanded {
  max-height: initial;
}

.image-preview img {
  position: relative;
  width: 100%;
  z-index: 100;
}

.image-preview .image-overlay {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=Background" alt="example" />
  <div class="image-overlay">
    <h1>This is an example</h1>
  </div>
</div>
<p>Here will stay some text ...</p>