JSFiddle - React, Tailwind, and code Playground

by Виталий Инчин

HTML

<div id="core">
    <img src="http://www.sunhome.ru/UsersGallery/Cards/prazdnik_den_zemli_kartinka.jpg">
        <img src="http://wpapers.ru/wallpapers/animals/Leons/2729/PREV_%D0%A0%D0%B8%D1%81%D0%BE%D0%B2%D0%B0%D0%BD%D0%BD%D0%B0%D1%8F-%D0%BC%D0%BE%D1%80%D0%B4%D0%B0-%D0%9B%D1%8C%D0%B2%D0%B0.jpg">
   <img src="http://www.sunhome.ru/UsersGallery/wallpapers/164/belka-zhivotnoe-kartinka.jpg">
</div>
            <div id="ultraphone">
            </div>

CSS

#core img{
    cursor: pointer;
    height:100px;
    transition: all 0.5s;
}

#core img:hover, #core img:focus{
    transform: scale(1.2);
}
#core{
    text-align: center;
}

#ultraphone{
    height: 500px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
}

JavaScript

window.addEventListener("load", function(){
    document.querySelector("#core").onclick = function(e){
        e.target.src&&(document.querySelector("#ultraphone").style.backgroundImage = "url("+e.target.src+")");
    }
});