Set image as cursor upon hover

While looking for inspiration and ideas to use for my personal portfolio, I came across Etienne Pharabot's portfolio. I loved his introduction, especially how emojis are displayed when you hover the mouse cursor over text. I loved this so much, I decided to steal use this concept in my personal portfolio. My implementation may not be as cool as Etienne's but it's pretty close :D

You can find the full code at this JSFiddle. Below, I explain how to code work.

First, we have the HTML:

  <div class="intro">
    <h2> <span class="hello"> Hello! </span> Nice to meet you!</h2>
    <h2>My name is <span class="my-name"> JOHN </span>.</h2>
    <h2>I am a <span class=dev> developer
          </span> living <span class="country"> CANADA </span>.
    </h2>
  </div>

I have enclosed each hover-able piece of text with span tags and given them unique class names. I will later use these class names when setting the image to display upon hover.

Unto our CSS code. Let's include some basic styling:

.intro {
  padding: 10px;
  width:70%;;
  margin-left:10%;
  padding-top:40px;
    position:relative;
  padding-bottom: 50px;
}

.intro h2 {
  margin:0;
  color: #333;
  text-transform:uppercase;
  font-size: 10vw;

}

.intro h2 span {
  text-shadow: 1px 1px 1px rgba(0,255,0,1);
}

The above styling doesn't really affect this feature. It's only there to make this example more visually appealing. I have given the text in the span tags a greenish text-shadow -- my way of showing that they are different, and to call the users' attention so they will hover on it.

Finally, using the cursor property, you can set the cursor to an image for every text by giving it an appropriate image link value.

.hello:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.my-name:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.country:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

.dev:hover {
 cursor:url(http://www.picgifs.com/smileys/smileys-and-emoticons/money/smileys-money-671353.gif), auto;
}

By appending auto to the cursor value, we ensure that the cursor returns to its default state if the image can't load. Now, if you hover on the span texts, the cursor changes to an image. Feel free to use whatever images you want. I think the size of the image matters too. If the image is too large, it won't load. I was unable to get it working with a 160x160 image. But when I reduced the image size to 60x60, it worked -- the cursor changes to an image when upon text hover.

If you decide to try this out, let me know how it goes :)