<div class="container">

  <h1>Background Image Scroll on Hover</h1>

  <div class="your_frame">
    <div class="background-image"></div>
  </div>

  <a class="btn" href="https://beproblemsolver.com/">Learn More</a>
</div>
.container {
  margin: 5px auto;
  font-family: 'Poppins', sans-serif;
}

.your_frame {
  width: 400px;
  height: 400px;
  overflow: hidden;
  cursor: pointer;
}

.background-image {
  width: 100%;
  height: 100%;
  background: cover no-repeat;
  background-image: url(https://source.unsplash.com/400x1500/);
  transition: background-position 5s ease-out;
}

.your_frame:hover .background-image {
  background-position: 0 100%;
}

.btn {
  background-color: green;
  padding: 15px 10px;
  display: inline-block;
  margin-top: 10px;
  color: #fff;
  text-decoration: none;
}

External CSS

  1. https://fonts.googleapis.com/css2?family=Poppins&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.