JSFiddle - React, Tailwind, and code Playground

by MasterAlex

HTML

<div class="phone">
    <div class="phone-img-color"></div>
    <div class="phone-img-gray"></div>
</div>

CSS

.phone {
    position: relative;
    width: 200px;
    height: 126px;
}

.phone div {
    position: absolute;
    display: inline-block;
    width: 400px;
    height: 300px;
    background-size: 100% 100%;
    -webkit-transition: opacity 1s linear;
       -moz-transition: opacity 1s linear;
         -o-transition: opacity 1s linear;
            transition: opacity 1s linear;
}

.phone-img-color {
    opacity: 1;
    background-image: url("https://img3.akspic.ru/image/106662-priroda-dikaya_mestnost-ozero_luiza-gora-morennoe_ozero-2560x1440.jpg");
}

.phone-img-gray {
    opacity: 0;
    background-image: url("https://img3.akspic.ru/image/106662-priroda-dikaya_mestnost-ozero_luiza-gora-morennoe_ozero-2560x1440.jpg");
}

.phone:hover .phone-img-color {
    opacity: 0;
}
.phone:hover .phone-img-gray {
    opacity: 1;
}

JavaScript

// Пример для вопроса http://hashcode.ru/questions/395147/