<div class="ad-container">

  <a href="#" class="ad-link" target="_blank" rel="noopener">
    <div class="ad-image"></div>
  </a>

  <div class="ad-content">
    Does your company use Apple devices? <a href="#">Jamf Now</a> can help you set up, manage and protect your iPad, iPhone and Mac devices from anywhere. Manage your first 3 devices for free!
  </div>

</div>

@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700");

body {
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: radial-gradient(#666, #222);
}

.ad-container {
  width: 300px;
  border: 1px solid white;
}

.ad-link {
  display: block;
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.ad-image {
  width: 300px;
  height: 300px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/jamf-laptop-screen.png);
  background-size: 800px;
  background-repeat: no-repeat;
  background-position: -30px 40px;
  transition: background-position 0.25s;
}
.ad-image:hover {
  background-position: -150px -50px;
}

.ad-content {
  background: white;
  padding: 1rem;
  font: 12px "Lato";
}