How to put an image arrow to indicate to scroll down

Hi,

My website:

https://importcarfactory.com/

Has the following code associated with the current arrow pointing down:

Quote

/* Scroll down Arrow */
.arrow{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 30px;
    height: 30px;
    border-bottom: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 1.8s ease infinite;
}
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
}

I want to have the .png image below instead of the current arrow.

Any help is appreciated.

Thanks,

MC

Change this code

<div class="arrow">
  <span></span>
</div>

to this

<div class="arrow">
  <span><img src="https://images.squarespace-cdn.com/content/6679b55e6ebf2652050ac7b2/bddba3e7-9f37-4a51-bc91-cc79ae1e8bd9/alema1.png?content-type=image/png" width="30px"></span>
</div>
<style>
  .arrow span {
    transform: unset !important;
    border: none !important;
}
</style>

Cool thanks!

How to make the arrow a little bigger?

Hi @cruz, you can try this code to make the arrow bigger:

<div class="arrow">
    <span>
        <img class="arrow-img" src="https://images.squarespace-cdn.com/content/6679b55e6ebf2652050ac7b2/bddba3e7-9f37-4a51-bc91-cc79ae1e8bd9/alema1.png?content-type=image/png">
    </span>
</div>

<style>
    .arrow-img {
        width: 70px; /* Change the width to your desired size */
        height: auto; /* Maintain aspect ratio */
    }
    
    .arrow span {
        transform: unset !important;
        border: none !important;
    }
</style>

Let me know how it goes.