title: Changing children elements when hovering the parent
body: <p>I have my a container wich has a background image a title and button.</p>
  
  <p>I want to hover on the container and change the title text-align to left, same as the button and display some information.</p>
  
  <p>My question is if this is possible using only CSS3?</p>
  
  <p>Here are the images of what I want to do:
  <img src="https://i.stack.imgur.com/aHDxz.png" alt="enter image description here">
  <img src="https://i.stack.imgur.com/CXsCK.png" alt="enter image description here">
  (The name doesn't matter it's just an example)</p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>   &lt;article class="destination__item destination__item--jacksonhole"&gt;
         &lt;h2 class="destination__item--name"&gt;Jackson Hole&lt;/h2&gt;
         &lt;a href="#" class="destination__item--btn"&gt;Ver más&lt;/a&gt;
     &lt;/article&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>.destination__item {
      padding: 16em 0;
      text-align: center;
  }
      .destination__item--canyons {
          background: url(../images/destinos/dest1.jpg) no-repeat;
          background-size: cover;
      }
      .destination__item--name {
          color: white;
          font-size: 36px;
          font-weight: 700;
          padding-bottom: .5em;
          text-transform: uppercase;
      }
      .destination__item--btn {
          background-color: $color__red--primary;
          color: white;
          font-weight: 400;
          font-size: 14px;
          padding: 1em 2.5em;
          transition: all .5s ease;
          text-transform: uppercase;
          &amp;:hover {
              text-decoration: none;
              background-color: $color__red--dark;
              color: white;
          }
      }
  </code></pre>
  
  <p>To be honest, I have no idea where to start on the hover state, hope you guys can guide me a little bit.</p>