ref https metroui org ua tiles html DOCTYPE html html lang en head style body min height 600px style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body h1 Hello world h1 div class tiles grid a href https github com olton Metro UI CSS data role tile class bg indigo span class mif github icon span span class branding bar top Github span span class badge bottom 30 span a div data role tile class bg cyan span class mif envelop icon span span class branding bar Email span span class badge bottom 128077 10 span div div data role tile class bg orange data size wide span class mif chrome icon span span class branding bar Chrome span div div data role tile data size small span class mif apple icon span div div data role tile data size small class bg red span class mif bell icon span div div data role tile data size small class bg teal col 1 row 6 span class mif windows icon span div div data role tile data size small class bg brown col 2 row 6 span class mif wind icon span div div data role tile class bg cyan span class mif table icon span span class branding bar Tables span div div data role tile data size medium data effect hover slide left div class slide front img src https notebook xbdev net var images test512 png class h 100 w 100 div div class slide back d flex flex justify center flex align center p 4 op red p class text center Tumultumque de brevis historia aperto heuretes p div span class branding bar fg dark hover slide up span div div div data role tile data size wide data effect image set img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script body html Randomly trigger hover over effects programatically JavaScript DOCTYPE html html lang en head style body min height 600px style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body h1 Randomly trigger slider effect to catch the users interest h1 div class tiles grid div id abc data role tile data size medium data effect hover slide left div class slide front img src https notebook xbdev net var images test512 png class h 100 w 100 div div class slide back d flex flex justify center flex align center p 4 op red Hello div span class branding bar fg dark hover slide up span div div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script script function toggleHover let e document getElementById abc if e children 0 style left e children 0 style left 0px e children 0 style left 150px e children 1 style left 0px else e children 0 style left 0px e children 1 style left 150px end if setTimeout toggleHover 3000 5000 Math random 3 5 seconds end toggleHover setTimeout toggleHover 3000 5000 Math random 3 5 seconds script body html
div div div data role tile data size wide data effect image set img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png img src https notebook xbdev net var images test512 png div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script body html Randomly trigger hover over effects programatically JavaScript DOCTYPE html html lang en head style body min height 600px style Required meta tags meta charset utf 8 meta name viewport content width device width initial scale 1 0 maximum scale 1 0 user scalable no Metro 4 link rel stylesheet href https cdn metroui org ua v4 css metro all min css head body h1 Randomly trigger slider effect to catch the users interest h1 div class tiles grid div id abc data role tile data size medium data effect hover slide left div class slide front img src https notebook xbdev net var images test512 png class h 100 w 100 div div class slide back d flex flex justify center flex align center p 4 op red Hello div span class branding bar fg dark hover slide up span div div jQuery first then Metro UI JS script src code jquery com jquery 3 3 1 min js script script src cdn metroui org ua v4 js metro min js script script function toggleHover let e document getElementById abc if e children 0 style left e children 0 style left 0px e children 0 style left 150px e children 1 style left 0px else e children 0 style left 0px e children 1 style left 150px end if setTimeout toggleHover 3000 5000 Math random 3 5 seconds end toggleHover setTimeout toggleHover 3000 5000 Math random 3 5 seconds script body html