CSS trouble getting hover state to behave on simple div

Question

Here’s a tricky one…

I have a div, the contents of which should change on hove over on any part of it.

Here’s a pic detailing both wanted states:

And here is best effort, so far: codepen ..it needs a bit of work.

Any help much appreciated!

Here's the HTML so far:

    <div class="item green">


     <a href="#">
      <h4>Welcome</h4>

      <p>Click here to find out more</p>
      <img src="http://www.veropixel.com/res01-170w115h.jpg"/>
    </a>
</div> <!-- /item -->

Answer 1

So there's my solution http://codepen.io/anon/pen/mIrvA :

  $resinGreen: #00a14a;

  .green { background: $resinGreen; }

  .item {
        width: 300px;
        margin-bottom: 5px;

        a {
              display: block;
              height: 98px;
              overflow: hidden; /* cancels img float */
              text-decoration: none;

        h4, p {
              height: 98px;
              line-height: 98px; /* Two lines added to center 
              vertically text of course you can use display:inline-block
               with vertical-align:middle */
              padding-left: 15px;
              margin:0;
        }

        img {
              float: right;
              height: 98px;
        }

        p {
              display: none;
        }

        &:hover {
             h4, img { display: none; }
             p { display: block; }
        }
      }

    }

Your problem was that your link haven't a height so it's why it was blinking, i also moved img to the first place for floating