<!DOCTYPE HTML><HTML><Head><Scriptsrc= "Https://code.jquery.com/jquery-1.11.3.js"></Script> <MetaCharSet= "Utf-8"> <title>JS Bin</title></Head><Body> <H1>Wombat Revealer</H1> <Divclass= "Item One"> <Divclass= ' cover '> <span>Reveal wombat!</span> </Div> <imgsrc= "Https://c2.staticflickr.com/6/5290/5262975644_bc61d8702d_b.jpg"width=320/> </Div> <Divclass= "Item "> <Divclass= ' cover '> <span>Reveal wombat!</span> </Div> <imgsrc= "Https://upload.wikimedia.org/wikipedia/commons/8/89/Common_Wombat_ (vombatus_ursinus_tasmaniensis). jpg" width=320/> </Div> <Divclass= "Item three"> <Divclass= ' cover '> <span>Reveal wombat!</span> </Div> <imgsrc= "Https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/Vombatus_ursinus_-Maria_Island_National_ Park.jpg/1024px-vombatus_ursinus_-maria_island_national_park.jpg "width=320/> </Div></Body></HTML>
{ width: 320px; height: 213px; background-color: yellow; position: absolute; transition: opacity 500ms 200ms, transform 500ms;} { opacity: 0; Transform: rotate (180deg);}
jquery ('. Cover '). Click (function(e) { var target = jQuery (e.currenttarget); Target.toggleclass (' open ');});
[CSS] CSS Transitions:delays and multiple Properties