JSFiddle - React, Tailwind, and code Playground

by J. Albert Bowden

HTML

<div class="featured-image" id="featured-image-one">
          <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100">
            <defs>
              <clipPath id="ellipse">
                <ellipse fill="#ff0000" cx="50" cy="35.5" rx="49.5" ry="35" />
              </clipPath>
              <clipPath id="hexagon">
                <polygon points="25, 0  75, 0 100, 43.30127018922193 75, 86.60254037844386  25, 86.60254037844386  0, 43.30127018922193"/>
              </clipPath>
              <clipPath id="rectangle">
                <rect x="0" y="0" width="100" height="70"></rect>
              </clipPath>
            </defs>
            <g>
              <image preserveAspectRatio="none" x="0" y="0" width="100%" height="100%" xlink:href="http://upload.wikimedia.org/wikipedia/commons/thumb/b/bf/Bucephala-albeola-010.jpg/800px-Bucephala-albeola-010.jpg" id="clippy" clip-path="url(#hexagon)" />
              <foreignObject id="hoverText" x="10" y="30" width="100" height="100" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="display: none;">
                <body xmlns="http://www.w3.org/1999/xhtml">
                  <p style="color: #ffffff; font-size: 5px;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </body>
              </foreignObject>
            </g>
          </svg>
        </div>

JavaScript

$hoverText = $('#hoverText');
$('body').on('mouseover', '#featured-image-one', function () {
    $hoverText.show();
});
$('body').on('mouseout', '#featured-image-one', function () {
    $hoverText.hide();
});