JSFiddle - React, Tailwind, and code Playground

HTML

<!-- "Different zoom levels shows different information"
     http://stackoverflow.com/questions/15204620/different-zoom-levels-shows-different-information
     -->

<body class="zoom-medium">
    <div class="image">
        <img class="zoomed-low" src="http://farm9.staticflickr.com/8514/8519613938_0e8b8f989a_s.jpg" />
        <img class="zoomed-medium" src="http://farm9.staticflickr.com/8514/8519613938_0e8b8f989a_m.jpg" />
        <img class="zoomed-high" src="http://farm9.staticflickr.com/8514/8519613938_0e8b8f989a.jpg" />
        <p class="zoomed-high">Vought F-8J Crusader from San Diego Air &amp; Space Museum Archives</p>
    </div>
    <div id="zoombox">
        <button id="zoom-plus">+</button>
        <button id="zoom-minus">-</button>
    </div>
</body>

CSS

/* Hide all zoom-dependent elements by default. */
.zoomed-low, .zoomed-medium, .zoomed-high {
    display: none;
}

/* Show only elements for current zoom level. */
body.zoom-low .zoomed-low, body.zoom-medium .zoomed-medium, body.zoom-high .zoomed-high {
    display: block;
}

/* Additional Stuff */
#zoombox {
    position: absolute;
    top: 10px;
    left: 10px;
}

JavaScript

zooms=['low', 'medium', 'high']
zoom=1

$(document).ready(function(){
    $("#zoom-plus").click(function(){
        if(zoom==zooms.length-1){
            return;
        }
        zoom++;
        $('body').removeClass('zoom-'+zooms[zoom-1]).addClass('zoom-'+zooms[zoom]);
    });
    $("#zoom-minus").click(function(){
        if(zoom==0){
            return;
        }
        zoom--;
        $('body').removeClass('zoom-'+zooms[zoom+1]).addClass('zoom-'+zooms[zoom]);
    });
});