JSFiddle - React, Tailwind, and code Playground

by cordeliaf

HTML

<div id="rose" class=" ">
    <img src="http://upload.wikimedia.org/wikipedia/commons/c/c7/Rose_flower_black_background.jpg" class="swap1" style="position: absolute;">
    <img src="http://static.guim.co.uk/sys-images/Environment/Pix/pictures/2009/02/09/roseonblack.jpg" class="swap2" style="position:relative;">
    <img src="http://www.freestockphotos.biz/pictures/11/11982/roses.jpg" class="swap3">
    <p class="btn">Click for roses</p>
    <button id="testButton">Click to see this text change color</button>
</div>

CSS

#rose img {
    height:300px;
    width:400px;
    left:10px;
    top:10px;
    padding-bottom:5px;
}
.swap3 {
    display:none;
}
p.btn {
    width:150px;
    font-family:"Times New Roman";
    font-size:22px
}
p:hover {
    color: #FF0000;
    background:#C0C0C0;
    border-style:solid;
    border-color:#0000ff;
    font-family:"Times New Roman";
    font-size:22px;
}
}
.swapMe img {
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.swap1, .swapMe:hover .swap2 {
    -webkit-opacity: 1;
    opacity: 1;
}
.swapMe:hover .swap1, .swap2 {
    -webkit-opacity: 0;
    opacity: 0;
}
.twoRose img {
    -webkit-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}
.twoRose .swap1, .twoRose .swap2 {
    display: none;
}
.twoRose .swap3 {
    display: inline;
}

JavaScript

var rose = document.getElementById("rose");
var roseClasses = rose.classList;
document.querySelector(".btn").addEventListener("click", function () {
    roseClasses.toggle("twoRose");
});

var mOut = rose.querySelector(".btn");
mOut.addEventListener("mouseout", function () {
    mOut.style.border = "2px solid green";
    mOut.style.color = "#f00";
});

rose.querySelector("img").addEventListener("mouseover", function () {
    rose.classList.toggle("swapMe");
});

var button = document.getElementById("testButton");

//if (button.addEventListener) { 
if (button.addEventListener("mousedown", function () {
    button.style.color = "#ff0000";
}));

else {
    button.addEventListener("mouseup", function () {
        button.style.color = "#000000";
    });
}

/*-moz-transition: all 1s ease-in-out; 
    -ms-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;*/