JSFiddle - React, Tailwind, and code Playground

by seler

HTML

<a class="trigger1" href="#">trigger 1</a>
    <a class="trigger2" href="#">trigger 2</a>
    <a class="trigger3" href="#">trigger 3</a>
    <a class="trigger4" href="#">trigger 4</a>
    <div class="image image1"></div>
    <div class="image image2"></div>
    <div class="image image3"></div>
    <div class="image image4"></div>

CSS

.image {
    position: absolute;
    width: 473px;
    height: 139px;
    background: url(http://dl.dropbox.com/u/5011224/kodak/kodim01.png) center center no-repeat;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    opacity: 0;
}
.image1 { opacity: 1;}
.image2 {
    background-image: url(http://dl.dropbox.com/u/5011224/kodak/kodim02.png);
}
.image3 {
    background-image: url(http://dl.dropbox.com/u/5011224/kodak/kodim03.png);
}
.image4 {
    background-image: url(http://dl.dropbox.com/u/5011224/kodak/kodim04.png);
}
.trigger2:hover ~ .image2 {
    opacity: 1;
}
.trigger3:hover ~ .image3 {
    opacity: 1;
}
.trigger4:hover ~ .image4 {
    opacity: 1;
}