<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;
}
This Pen doesn't use any external JavaScript resources.