JSFiddle - React, Tailwind, and code Playground

HTML

<div id="test" onclick="someFunction(test)">
    <img id="imgOne" src="http://i.imgur.com/RncDJuf.png" height="75px" align="center">
    <img id="imgTwo" src="https://cdn4.iconfinder.com/data/icons/defaulticon/icons/png/256x256/arrow-up.png" height="75px" align="center">
    upVotes
</div>

CSS

#test{
    width: 100px;
	height: 100px;
    margin: 100px;
    padding: 10px;
    border: 2px solid #FF6600;
    transition-duration: .2s;
    opacity: 1;

}

#test:active {
    transform: translate(0px,-200px);
    opacity: 0;
}

img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#test {
    text-align: center;
}

#imgOne:active {
    display: none;
}

#imgTwo {
    display: none;
}

#imgTwo:active {
    display: block;
}