JSFiddle - React, Tailwind, and code Playground
by genelocklin
HTML
<figure>
<img src="http://placehold.it/320x320" />
<span class="mag"></span>
</figure>
CSS
*{margin:0;padding:0;}
body{margin:3em auto;width:320px;}
html{background:#fff;}
/* begin post code */
figure { position: relative; }
figure:hover .mag {
background: rgba(0,0,0,.75) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAAAsTAAALEwEAmpwYAAAEvElEQVRoBc2YTWgVVxTHfdHaNPWj4NcmrZEaa0GLiiYgthRqWpS6cKEoiFGhGwvSjYsiuHSn7ty4UFoEwahQrbRiwIUFbYMpqZpCNQb6YUVFrVg/qsbfP75J75t3z513X96L78CfmTn33P85/5m5HzO5gYGBUbGWy+VepU8TeBs05s/rOV4B10CfAPc/HKtquRgBFL6YalaBpWAmUNE+e4rzd3AGdICT5HnAsfImAVkg60fge/AE6JHF4mf6bACvZOWKbQ8WT8IpYC8ot/C00E643ostMhRvCiDRfNAD0kUM9/oWnGtCRcW0eQWQ4H3wdxWKT8T/B/fmmEKt2KJBzECdB/l3YBoImQR2gQtAM48G7mQwGywEGuQhU/wmCvsqFJTZ5iojWAWooORO+Y7nad8Iprp93XPaxoFl4DjwcSS+e7S3un1jzwteIcg0YBPy9PEhbdtAQ0wS4leDP0CaL7nupm1cDKcbOyQAkg+BNdvcpm2F2zHmnL56rX4BSdHp45cxfG7soACI68BJI4EWoE/dTuWcw6FV+6qRQ+NpWlm86oS1AuvubyuH2NeHHFoQH4H0E9D1F74+Wb7kCew2SLWCvpZFEtMOnzXOztI2OoZLsbKxwJp52mMJs+LJ9S64D9JPQZPE7Kz+6Xa9+zOAb86+jl/TYEWNAnoh1CYvbdrhLkw7s64loBmoc9p+JJmW/WrYKYN0ruE33RLQaLRqH1Qt05Tqs7d8zpAveYV8MdoeVMtuQPxiBBZmmFh4mX0lAa8bYdqrVMvE7ROgeqJMHX4zekwy/JVw6077itXsFGUisV6Vd6KY4oJnGeF/GX7TLQGXwTNPRAtb63qPvxKuDwySXw2/6U4E/OmJ0PSqj/iKGjdFn6ltHlLdRH1fRFkdc71+ffzg6SVxWzz+4braIfB9LPXht6ZXO6eWZmwl0Eka2uCVvY0Wtwu4pgPtPNN5dL3TjS31PNnMaSrVEu8j7sffVCqhFQeHVvsTwJfjAf45Vt+Qf+gOQfCZQa6EP4HGEFGojb4qfh/wFS/f/lD/UJsrQEk0Fqwkl2hbEiLztdFnOjgW4NXnZtlPeEiAkmMLgAa1JeJf2naBmb5iXR8xk4EmgdD3sPJoZ1rv9o059/1WaYdwH8gBy+7S0JnHRY7a22gafAM0A83zn4A3QSl2lKB1FK4bFGc+tTBsBdZT8PkfE299Kvrifb7DcET98VDtBa+QKwayzUCzgy9ZtXzRIkwBg+pe/EbX4K1UwVoDzmXwRYkICsiL0K50B7iZkTgkUq/XAaDx0QC+AaH4kkVkCkheKxLq23k76AFaoUMFJG39xO0BixKe/E3Rr8csER3EZI6JolmITkFjM6b1Yg5oAXOBZpoJQLOW9vPXgFb1LtBNwXc4Fhk843HqqawoavzfoSexHg57dnLvzEifU5xEhBY5Pcngkyj5FaqWuOGKeOkCdGNKFHGIuKK/hDUhwBGhH2nJBOA7FomoGQHliqgpAZEiBqfYmhMQIeJrXrcx0esAnUbE8uvEQZItDyT8WB/uNWk8iXsUthacCBTYVrMCVDQi9HEVEtFbk2NA48AFIrRVOSJNDk5zPqFmxwDFFRhjYgwOjYfPwbdgv57Qc2ZcJZTPpEMtAAAAAElFTkSuQmCC) center center no-repeat;
height: 320px;
width:...
JavaScript
// http://bit.ly/sUWI6A