JSFiddle - React, Tailwind, and code Playground

by smlombardi

HTML

<a href="#" class="imagefield imagefield-nodelink imagefield-field_post_thumbnail"><img class="imagefield imagefield-field_post_thumbnail" width="100" height="60" alt="" src="http://lorempixel.com/100/60/sports/"></a>

CSS

.image-wrap {
            position: relative;
        }
        .image-frame {
            position: absolute;
            width: 92px;
            height: 52px;
            top: 0;
            left: 0;
            z-index: 10;
        }
        .image-frame-over {
            border: 4px solid rgba(255,0,0,1);
        }

JavaScript

$(document).ready(function(){


      $('img.imagefield-field_post_thumbnail').wrap(function() {
        return '<div class="image-wrap" />';
      });

      $('img.imagefield-field_post_thumbnail').after(function() {
        return '<div class="image-frame" />';
      });

      $('div.image-frame').hover(
        function () {
          $(this).addClass("image-frame-over");
        },
        function () {
          $(this).removeClass("image-frame-over");
        }
      );



    });