title: How to hide the top part of a group of image?
body: <p>I want to hide the top part of all the image. I tried using <code>clip</code> but that requires the image to be either fixed or absolute. The group of images are of scroll type Is there any way to hide the top part of the image. Below is an example.</p>
  
  <pre><code>&lt;style&gt;
      #rightCol{
          overflow-x: hidden;
  
          overflow-y: scroll;
          max-height: 82vh;
      }
     body{
      overflow:hidden;
      }
  &lt;/style&gt;
  
  &lt;div class="row"&gt;
  &lt;div class="col-md-9" style="padding:0; border:ridge; " id="rightCol"&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_1.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_2.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_3.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_4.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_5.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;img class="img-responsive" src="&lt;?php echo base_url('assets/images/image_6.jpg') ?&gt;" /&gt;
  &lt;br&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>