JSFiddle - React, Tailwind, and code Playground

by navyflower

HTML

<div id="views_slideshow_pager_field_item_bottom_zdjecia_thumbs-pane_zdjecia_album_22" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd">
    <div class="views-field-field-image">
        <div class="views-content-field-image">
            <div class="vignette-wrapper">
                <img typeof="foaf:Image" class="image-style-zdjecie-thumb" src="http://swiatecka.eu/sites/swiatecka/files/styles/zdjecie-thumb/public/images/img_0193copy.jpg" width="150" height="100"><span class="vignette" style="box-shadow: rgb(255, 32, 89) 0px 0px 0px 0px inset;"></span>

            </div>
        </div>
    </div>
</div>
<div id="views_slideshow_pager_field_item_bottom_zdjecia_thumbs-pane_zdjecia_album_23" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-even">
    <div class="views-field-field-image">
        <div class="views-content-field-image">
            <div class="vignette-wrapper">
                <img typeof="foaf:Image" class="image-style-zdjecie-thumb" src="http://swiatecka.eu/sites/swiatecka/files/styles/zdjecie-thumb/public/images/img_0198copy.jpg" width="150" height="100"><span class="vignette" style="box-shadow: rgb(255, 32, 89) 0px 0px 0px 0px inset;"></span>

            </div>
        </div>
    </div>
</div>
<div id="views_slideshow_pager_field_item_bottom_zdjecia_thumbs-pane_zdjecia_album_24" class="views-slideshow-pager-field-item views_slideshow_pager_field_item views-row-odd">
    <div class="views-field-field-image">
        <div class="views-content-field-image">
            <div class="vignette-wrapper">
                <img typeof="foaf:Image" class="image-style-zdjecie-thumb" src="http://swiatecka.eu/sites/swiatecka/files/styles/zdjecie-thumb/public/images/img_0207copy.jpg" width="150" height="100"><span class="vignette" style="box-shadow: rgb(255, 32, 89) 0px 0px 0px 0px inset;"></span>

            </div>
        </div>
    </div>
</div>

CSS

.vignette-wrapper {
    width: 150px;
    height: 100px;
}
.views-slideshow-pager-field-item {
    margin-bottom: 10px;
}

JavaScript

$(document).ready(function () {
    $('.vignette-wrapper').parent('div').css({
        position: 'relative'
    });
    var img = $('.vignette-wrapper').children('img');
    $('<div class="overlay"></div>').text(' ').css({
        'height': img.height(),
            'width': img.width(),
            'background-color': '#FF2059',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
    }).insertAfter(img);
    $('.vignette-wrapper').bind('mouseover', function (e) {
        $(this).children('.overlay').css({
            'display': 'none'
        })
    });
    $('.vignette-wrapper').bind('mouseout', function (e) {
        $(this).children('.overlay').css({
            'display': 'block'
        })
    })


});