title: Align 2 different elements vertically
body: <p>I'm working on an div that comprises of 2 elements: an image and a text. The image occupying the first half (top) of the <code>div</code>, and the text occupying the bottom second part of the <code>div</code> (bottom).
  I would like for the image to fit the size of the <code>div</code>, but not to stretch, and also want to apply different hover effects to each element. I've been working on it but I don't get to build this kind of structure. This is what I have so far:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.work-item {
    position:relative;
    height:300px;
    width:350px;
  }
  .work-item-image {
    position:absolute;
    top:0;
  }
  .work-item-image img {
    max-height: 150px;
    max-width: 350px;
    object-fit: cover;
  }
  .work-item-text {
    position:absolute;
    vertical-align:middle;
    max-height: 150px;
    max-width: 350px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="work-item"&gt;
     &lt;a href="#"&gt;
       &lt;div class="work-item-image"&gt; 
         &lt;img src="..."/&gt;
       &lt;/div&gt;
       &lt;div class="work-item-text"&gt;
         &lt;h1&gt;Hello Worl&lt;/h1&gt;
       &lt;/div&gt;
     &lt;/a&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>