JSFiddle - React, Tailwind, and code Playground

by lalatino

HTML

<div id="home_container">
    <img src="http://upload.wikimedia.org/wikipedia/commons/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg" /><!--0 mouse over-->
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Larix_decidua_Aletschwald.jpg/180px-Larix_decidua_Aletschwald.jpg" /><!--1 mouse away-->
    aaaaaaaaaaaaaaaaaaaaaa<br/>
    bbbbbbbbbbbbbbbbbbbbbb
</div>

<!-- button onclick="a()">Animate</button -->

CSS

#home_container {
    position: relative;
    width:200px;
    height:100px;
    border:10px solid red;
    z-index: 0;
}

#home_container img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index: -1;
    opacity: 1;
}

JavaScript

function a() {
    var images = $('#home_container img');
    var sig = $(images[0]).css('opacity')==1; // true or false
    //$(images[0]).css('display', sig? 'block':'none');
    //$(images[1]).css('display', sig? 'none':'block');
    $(images[sig?1:0]).css('opacity',1).animate({'opacity':0.0}, 'slow');
    $(images[sig?0:1]).css('opacity',0).animate({'opacity':1.0}, 'slow');
}

$(function(){ $('#home_container').hover(a, a); });
//<div id="home_container" onmouseenter="a()" onmouseleave="a()">