Search code examples
jqueryhtmlcsscss-shapes

Adding Text to figure without distorting the shape/shadow. CSS

I've been trying to add text to the inside of these spheres. In google chrome, the shadow underneath is set to appear on hover. I am unsure if it works for other browsers, but the stage area for the shadow means I am having trouble adding text. 

Text A, Text B, Text c, Text D

Are appropriate names.

If anyone can help, that would be great.

http://jsfiddle.net/fnjw92dt/

Thanks !

Solution

  • Try adding a paragraph inside the actual figure like so:

    <div class="stage">
        <figure class="blueball" onclick="$('.main').moveTo(3);"><p>something here</p><span  class="shadow"></span></figure>    
</div>

    Then you can style it however you want:

    figure{position:relative;}
figure p{position:absolute; top:60px; left:40px;}

    example