How to animate arrow when the mouse hover on box


I am trying to copy a cetain box on this website:

The box with an eye background image, as you can see when the mouse hovers the background scales and the arrow animates a little to the right. I am trying to do that!

I gave up on inspect element so I try to get human help…

Here is what I did so far:

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/cards.css" type="text/css" />
    <title> Here Comes The Rocket </title>

    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-3">
          <a class="link-arrow" href="layers.html">
              <div class="outer-div">
              <h2 class="card-title"> TITLE HERE </h2>
              <div class="box-hashtag__footer">
                <p class="button--secondary">
                  <span class="icon">&#187;</span>

              <div class="inner-div"></div><!-- If any content added inside, it will also animate with the background! -->

    <!-- JQuery -->
    <script src="" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- My scripts -->

  height: 70vh;
  overflow: hidden;
  position: relative;

.icon:hover {
  transition: all 0.9s ease;
  padding-left: 2px;

.inner-div {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: all 1.1s ease;
  background-image: url('');
.inner-div:hover {
  transform: scale(1.1);

.card-title, .box-hashtag__footer {
  color: white;
  font-family: "arial";
  z-index: 5;

.card-title {
  position: absolute;
  top: 0;
  left: 5vh;

.box-hashtag__footer {
  position: absolute;
  bottom: 0;
  left: 5vh;

.icon:hover {
  margin-bottom: 4px;
  padding-left: 15px;
  transition: .2s ease-in;

Working Pen: Code

Mmove the icon when you hover the whole block not just the icon.


.link-arrow:hover .icon {
  margin-bottom: 4px;
  padding-left: 15px;
  transition: .2s ease-in;
1 Like

It worked!

I thank you very much for your time to write this code!

Thanks again

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.