Custom css cursor transition

Question

I have a ul with some items on each li I have a different cursor it works completely fine but it's not smooth, so if there is any way to make the transition from the default cursor to a custom image?

HTML

<section class="who">
  <ul>
     <li>Purpose</li>
     <li>Creative</li>
     <li>Enthusiastic</li>
     <li>Adventure</li>
     <li>Curious</li>
     <li>Passionate</li>
  </ul>
</section>

CSS

.who ul li:first-of-type {
   cursor: url('/assets/media/icons/target.png'), auto;
}

and so on, you got what idea.

smooth how? .. how you want a smooth change from the default cursor to a custom image, morphing? — Temani Afif, Oct 25 '18 at 22:44
I think this is out of the CSS scope, you will need something else — Temani Afif, Oct 25 '18 at 22:45
no sure, ... but I guess you should also replace the default cursor with your own image and the logic will become : "transition between two images" and here you can probably add some JS code to have a squence of image between the intial and final one to create the morphing effect [too complex for a small effect btw] — Temani Afif, Oct 25 '18 at 22:53

Aldo Maria Landini · Accepted Answer · 2018-10-27T09:09:03.627

So do you want change image cursor not quickly, but smooth like the fade-in/out effect? In that case you have also involve javascript:

.who ul li { cursor: none; }
Create a <div class="cursor-container"></div>
.cursor-container { position:absolute; z-index:100; }
Put all your image into a
.cursor-container .image-container { position:absolute; }
Use javascript's onMouseMove( ) in order to take cursor's coordinates and moving .cursor-container alongside (see here how)
With CSS hide all images .cursor-container .image-container { display:none }
Organize your list like <li class="whatever" onmouseover="changeCursor()"> each with a different class name
With JS you have to switch() all <li>'s classes and apply CSS3 transition (like opacity) to the right one.

Hope to has been useful.

This code below is an example (not worked on jsfiddle, copy on you local page).

<!DOCTYPE html>
<html>
  <head>
    <title> </title>

    <style type="text/css">
      .who ul {
        font-size: 0px;
        cursor: none;
      }
      .who ul li {
        display: inline-block;
        padding: 10px;
        background-color: #CCC;
        color: #FFF;
        font-size: 18px;
        cursor: none;
      }
      .who ul li.facebook {
        background-color: #3b5998;
      }
      .who ul li.twitter {
        background-color: #1dcaff;
      }
      .who ul li.youtube {
        background-color: #ff0000;
      }
      .who ul li.whatsapp {
        background-color: #075e54;
      }
      .who ul li.instagram {
        background-color: #e95950;
      }

      #cursor-container {
        position: absolute;
        width: 20px;
        height: 20px;
        display: none;
        cursor: none;
      }
      #cursor-container.visible {
        display: block;
      }
      #cursor-container .image-container {
        position: absolute;
        width: inherit;
        height: inherit;
        opacity: 0;
        background-color: #FFF;

        transition: opacity 0.6s linear;
        -moz-transition: opacity 0.6s linear;
        -o-transition: opacity 0.6s linear;
        -webkit-transition: opacity 0.6s linear;
      }
      #cursor-container .image-container.fadeIn {
        opacity: 1;
      }
      #cursor-container .image-container img {
        width: 100%;
        height: 100%;
      }

    </style>
  </head>
  <body>

    <div class="who">
        <ul>
            <li class="facebook" onmouseover="changeCursor(this);">facebook</li>
        <li class="twitter" onmouseover="changeCursor(this);">twitter</li>
        <li class="youtube" onmouseover="changeCursor(this);">youtube</li>
        <li class="whatsapp" onmouseover="changeCursor(this);">whatsapp</li>
        <li class="instagram" onmouseover="changeCursor(this);">instagram</li>
        </ul>
    </div>
    <div id="cursor-container">
        <div class="image-container facebook">
            <img src="http://icons.iconarchive.com/icons/sicons/flat-shadow-social/256/facebook-icon.png" />
        </div>
        <div class="image-container twitter">
            <img src="https://cdn2.iconfinder.com/data/icons/metro-uinvert-dock/256/Twitter_NEW.png" />
        </div>
        <div class="image-container youtube">
            <img src="https://image.flaticon.com/icons/png/128/185/185983.png" />
        </div>
        <div class="image-container whatsapp">
            <img src="http://aux2.iconspalace.com/uploads/whatsapp-icon-256-829186234.png" />
        </div>
        <div class="image-container instagram">
            <img src="https://image.flaticon.com/icons/png/128/174/174855.png" />
        </div>
    </div>

    <script type="text/javascript">

    var cursor = document.getElementById('cursor-container');
    var cursorImages = cursor.getElementsByClassName('image-container');

    (() => {

        let list = document.getElementsByClassName('who')[0].getElementsByTagName('ul')[0];

        document.addEventListener('mousemove', (e) => {

        cursor.style.top = e.clientY+'px';
        cursor.style.left = e.clientX+'px';
        });

        list.addEventListener('mouseenter', () => {

            cursor.classList.add('visible');
        });
        list.addEventListener('mouseleave', () => {

            cursor.classList.remove('visible');
        });

    })();


    function changeCursor(elem) {

        Array.from(cursorImages).map((elem) => {

            elem.classList.remove('fadeIn');
        });

      switch(elem.className) {

        case 'facebook': {
          cursor.getElementsByClassName('facebook')[0].classList.add('fadeIn');
          break;
        }
        case 'twitter': {
          cursor.getElementsByClassName('twitter')[0].classList.add('fadeIn');
          break;
        }
        case 'youtube': {
          cursor.getElementsByClassName('youtube')[0].classList.add('fadeIn');
          break;
        }
        case 'whatsapp': {
          cursor.getElementsByClassName('whatsapp')[0].classList.add('fadeIn');
          break;
        }
        case 'instagram': {
          cursor.getElementsByClassName('instagram')[0].classList.add('fadeIn');
          break;
        }
        default:
          break;
      }
    } 

    </script>

  </body>
</html>

I know this has been selected has the answer... but I don't see the part where the cursor transitions. Can you show an [jsfiddle](https://jsfiddle.net) of it? — Ibu, Oct 26 '18 at 17:10
For some technical details, this script doesn't work on jsfiiddle, but it works on local. Then I suggest you to copy the code and into html page in local. http://jsfiddle.net/nt7ozdgq/1/ PS: @TasteofLeaving is that what you meant? — Aldo Maria Landini, Oct 26 '18 at 19:40
Hello valerio, when i hover over the icons nothing is happening at all — Taste of Leaving, Oct 27 '18 at 02:27
I just edit my anwser, you can copy that code an run it on local, I assure you that will work (at least on firefox). — Aldo Maria Landini, Oct 27 '18 at 09:09

Custom css cursor transition

1 Answers1