How to create an interactive (clickable) animation for responsive website?

Question

Anyone have suggestions for object animations that can show text on hover or click? Looking for something like this on:

Trying to make these crystals into objects to be interactive. Sample mockup website here.

Answer 1

Surround your animations with a div, then bind to jquery mouseover and mouseout events to add and remove a css class that contains the desired text. Like this:

html:

<div class="crystalDiv">
  <!-- This contains an image of a crystal. You can have as many as you want -->
</div>

css:

.crystalHover:after{
    content:"Whatever text";
    position: absolute;
    /* Use top, bottom, left, right to position - it will relative to the crystal div*/
}

javascript:

$('.crystalDiv').on('mouseover',function(e) {
    $(this).addClass('crystalHover');
});
$('.crystalDiv').on('mouseout',function(e) {
    $(this).removeClass('crystalHover');
});
// You can do the same thing with click event if you want