zzRqPv

Call to action hover box

<div class="cta-hover-block image">
  <img src="http://via.placeholder.com/350x150/5c7e51/222223/?text=maybe an image">
</div>

index.html

<div class="grid-container">
  <div class="grid-x cell">
    <h1>Some Text</h1>
  </div>
  <div class="grid-x grid-margin-x">
    <div class="medium-6 large-8 cell">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="medium-6 large-4 cell">
      <div class="cta-hover-block image">
        <img src="http://via.placeholder.com/800x450/5c7e51/222223/?text=maybe an image">
      </div>
    </div>
  </div>
  
  <div class="grid-x cell">
    <h1>And now: turn around</h1>
  </div>
  <div class="grid-x grid-margin-x">
    <div class="medium-6 large-4 cell">
      <div class="cta-hover-block image">
        <img src="http://via.placeholder.com/800x450/5c7e51/222223/?text=maybe an image">
      </div>
    </div>
    <div class="medium-6 large-8 cell">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
  </div>
  
  <div class="grid-x cell">
    <h1>Even more fun</h1>
  </div>
  <div class="grid-x grid-margin-x">
    <div class="medium-6 large-8 cell">
      <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
        et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
    </div>
    <div class="medium-6 large-4 cell">
      <div class="cta-hover-block vertical">
        <div class="grid-y">
          <div class="small-6 cell">xx</div>
          <div class="small-6 cell">
            <div class="grid-container">
              <div class="grid-x">
                <div class="small-6 cell">AA</div>
                <div class="small-6 cell">BB</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

style.scss

body {
  padding: 2rem;
}

$black: #222223;
$paragraph-margin: 1rem;

img {
  margin-bottom: $paragraph-margin;
}

.cta-hover-block {
 box-shadow: 0 0 8px 1px rgba($black, 0.4);
  display: inline-block;
  line-height: 0;
  margin-bottom: $paragraph-margin;
  transition: all .2s ease-in-out;
  
  &.vertical {
    position: relative;
    padding-bottom: 40%;
    width: 100%;
    
    & > .grid-y {
      background: red;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
    }
  }
  
  & > img {
    margin-bottom: 0;
  }
  
  &:hover {
    cursor: zoom-in;
    box-shadow: 0 0 12px 2px rgba($black, 0.3);
    transform: scale(1.025);
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.4.0/css/foundation.min.css" rel="stylesheet" />

zzrqpv.markdown

zzRqPv

A Pen by Markus Bischof on CodePen.

License.