JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="580" width="780" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/">
	<g transform="translate(-5,-272.86218)">
		<image xlink:href="http://maribeth.sandbox.imarc.net/img/kevin-blog.png" height="580" width="780" y="270" x="5"/>
	</g>


	<g transform="translate(55,20)">
		<path opacity="0.2" d="m460,190c0,46-37,83-83,83s-83-37-83-83,37-83,83-83,83,37,83,83z" transform="matrix(0.12048193,0,0,0.12048193,82.776843,103.69677)" fill="#0394cd"/>
		<path d="m460,190c0,46-37,83-83,83s-83-37-83-83,37-83,83-83,83,37,83,83z" transform="matrix(0.09638554,0,0,0.09638554,91.740698,108.29918)" fill="#0394cd"/>
		<path d="m460,190c0,46-37,83-83,83s-83-37-83-83,37-83,83-83,83,37,83,83z" transform="matrix(0.07228916,0,0,0.07228916,100.70456,112.90159)" fill="#ffffff"/>
	</g>
	<rect rx="16" ry="16" height="110" width="750" y="459" x="16" fill="#ffffff"/>
	<text style="writing-mode:lr-tb;letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" line-height="125%" font-weight="normal" font-size="24px" font-style="normal" font-stretch="normal" font-variant="normal" y="485" x="32" font-family="Fjord One" xml:space="preserve" fill="#0394cd"><tspan y="485" x="32"><tspan line-height="125%" y="485" x="32" font-family="Fjord One" fill="#0394cd">Western Digital Passport</tspan></tspan></text>
	<text style="writing-mode:lr-tb;letter-spacing:0px;text-anchor:start;word-spacing:0px;text-align:start;" line-height="125%" font-weight="normal" font-size="16px" font-style="normal" font-stretch="normal" font-variant="normal" y="514" x="32" font-family="Arial" xml:space="preserve" fill="#333333"><tspan y="514" x="32"><tspan y="514" x="32">I back up this 500 GB drive regularly, but less for data recovery and more to just have archives of old </tspan></tspan><tspan y="534" x="32"><tspan y="534"...

CSS

svg rect, svg text {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity 500ms, visibility 500ms;
}

svg > g:hover + rect,
svg g:hover + rect + text,
svg g:hover + rect + text + text {
    visibility: visible;
    opacity: 1;
}

svg:hover g:not(:first-child) {
    opacity: 0;
    -webkit-transition: opacity 500ms;
}

svg g:first-child:hover ~ g,
svg:hover g:hover {
    opacity: 1;
}