cruz Posted Thursday at 07:25 PM Share Posted Thursday at 07:25 PM 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 Link to comment
tuanphan Posted Friday at 04:02 AM Share Posted Friday at 04:02 AM 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> Spark-Plugin and cruz 1 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
cruz Posted Friday at 10:26 AM Author Share Posted Friday at 10:26 AM (edited) Cool thanks! How to make the arrow a little bigger? Edited Friday at 10:26 AM by cruz Link to comment
Spark-Plugin Posted Friday at 01:03 PM Share Posted Friday at 01:03 PM 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. tuanphan 1 - Answered by Iuno from sparkplugin.com Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment