CodePen

HTML

            
              <p>Made with Kirby and <span class="heart">&#9829;</span></p>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body {
  margin-top: 100px;
}

p {font: italic 75px Georgia; text-align: center;}

span {
  font-size: 60px;
  font-family: Georgia;
  font-style: normal;
  color: firebrick;
}

span:hover {
  cursor: pointer;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function animateHeart() {
    $('span.heart.beat').animate({
        fontSize: $('span.heart').css('fontSize') == '60px' ? '50px' : '60px'
    }, 500, animateHeart);
}

$('span.heart').hover(
       function(){ $(this).addClass('beat')
         animateHeart() },
       function(){ $(this).removeClass('beat') }
)
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................