JSFiddle - React, Tailwind, and code Playground

by Roberto Ramirez

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<div class="container">
    <div class="row">
        <div class="col-xs-6">
            <div class="thumbnail">
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20original%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%20over%20/%3E&w=342&h=300" />
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="col-xs-6">
            <div class="thumbnail">
                <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%201%20/%3E&w=342&h=300" data-change-over="https://placeholdit.imgix.net/~text?txtsize=33&txt=%3Cimg%202%20/%3E&w=342&h=300" />
                <div class="caption">
                    <h3>Thumbnail label</h3>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a>
                        <a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

JavaScript

function changeOverImage(element) {
    var url = $(element).prop('src'),
        url_over = $(element).data('change-over');

    $(element)
        .prop('src', url_over)
        .data('change-over', url);
}

$(document).delegate('img[data-change-over]', 'mouseover', function() {
    changeOverImage(this);
});
$(document).delegate('img[data-change-over]', 'mouseout', function() {
    changeOverImage(this);
});