JSFiddle - React, Tailwind, and code Playground

by brightonmike

HTML

<div class="img">
<img width="960" height="325" src="http://www.maxumi.co.uk/wp-content/uploads/2012/03/Vagabundos.jpg">
<div class="disc"></div>
    <div class="disc a"></div>
    <div class="disc b"></div>
    <div class="disc c"></div>
    <div class="disc d"></div>
    <div class="disc e"></div> 
    <div class="disc f"></div>
    <div class="disc g"></div>
    <div class="disc h"></div>
    <div class="disc i"></div>
    <div class="disc j"></div>      
</div>

CSS

div.img {position:relative;width:960px;height:300px;overflow:hidden;}
div.disc {
position:absolute;
    top:0;
display:block;
width:100px;
height:100px;
background:rgba(255,255,255,0.8);
-webkit-transition: all .4s ease;    
}
div.disc:hover {
    background:transparent;
   -webkit-transform: scale(1.1);  
}
div.disc.a {top:100px;}
div.disc.b {top:200px;}
div.disc.c {left:100px;}
div.disc.d {left:100px;top:100px;}
div.disc.e {left:100px;top:200px;}
div.disc.f {left:200px;}
div.disc.g {left:200px;top:100px;}
div.disc.h {left:200px;top:200px;}
div.disc.i {left:300px;}
div.disc.j {left:300px;top:100px;}