title: CSS Image not scaling on hover
body: <p>I've made a responsive image grid and am trying to add a hover effect to it so that the image gets a dark overlay and some text fades in on it. However, I've been having a tough time implementing it.</p>
  
  <p>Here's my HTML structure.</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tile"&gt;
          &lt;img src="some_image" class="animate"&gt;
          &lt;div class="overlay"&gt;
          &lt;p&gt;Mahatma Gandhi&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here's my CSS</p>
  
  <pre class="lang-css prettyprint-override"><code>.gallery .row .tile:hover ~ .tile img {
    transform: scale(1.2);
  }
  </code></pre>
  
  <p>However upon hovering over the image, it does not have the expected behaviour.</p>
  
  <p>What's wrong?</p>
  
  <p><strong>EDIT</strong>
  I got the hover effect to work and I can now fade in text.</p>
  
  <p>Here's my code for that:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="tile"&gt;
                          &lt;img src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d6/Tagore_Gandhi.jpg/220px-Tagore_Gandhi.jpg" class="animate"&gt;
                          &lt;div class="overlay"&gt;
                                  &lt;div class="text"&gt;Mahatma Gandhi&lt;/div&gt;
                              &lt;/div&gt;
                        &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.tile {
    position: relative;
    width: 100%;
  }
  
  .image {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .overlay {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    transition: .5s ease;
    background-color: rgba(0, 0, 0, 0.8);
  }
  
  .tile:hover .overlay {
    opacity: 1;
  }
  </code></pre>
  
  <p>This seems to work but I think it doesnt have a certain "feel" to it. So I need to add a scale effect to the image. How can I do that</p>