How to animate arrow when the mouse hover on box

HTML & CSS
1

Hello!

I am trying to copy a cetain box on this website: https://www.boldare.com/

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">
  <head>
    <meta charset="utf-8">
    <!-- Latest compiled and minified Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="/styles/cards.css" type="text/css" />
    <title> Here Comes The Rocket </title>
  </head>
  <body>


    <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">
                  Discover
                  <span class="icon">&#187;</span>
              </p>
            </div>

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



    <!-- JQuery -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <!-- My scripts -->
  </body>
</html>


.outer-div
{
  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('https://www.boldare.com/static/machine-learning-tile-03c0a9e3b3b5d431d5e3c4e03edc50fa-c9013.png');
}
.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

2

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

e.g.

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

It worked!

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

Thanks again

1 Like
4

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