MuchCleanerOpaqueTileHoverAway

index.haml

/* Original is 1600px by 1200px */
/* I want width of 900pxxso */
/* (90x0/1600)*1200 = 675px */
/* Surface area of back is then */
/* 900 * 675 =  607500 */
/* 607500 / ( 10 * 10) = */
/* 6075 */

/* 607500/50 = 12150 */
/* (900/50) * (675 /50) = 243 */
/* + an extra row (900/50) = +18 */
/* 261 */

/* Or just remember to +1 the height/blocksize */
/* (900/50) * ((675 /50)+1) */
.container
  - (1..261).each do
    .tile

muchcleaneropaquetilehoveraway.markdown

MuchCleanerOpaqueTileHoverAway

Just a practice exercise writing a snippet using random(), based off: http://codepen.io/pouretrebelle/pen/sxfLF

A Pen by Brad Barrows on CodePen.

License.

style.scss

@import "compass/css3";

$a-min: 20;
$a-max: 70;
$r: 0;
$g: 0;
$b: 0;

$bsize: 50px;

.tile {
  float: left;
  height: 0;
  width: $bsize;
  height: $bsize;
}

  @for $i from 1 through 261  {
  .tile:nth-child(#{$i}) {
    background-color: rgba( $r, $g, $b, ($a-min+random($a-max+-$a-min))/100 );
  }
}

body {
  background: rgba(90,70,22,.5);
  margin: 0;
  overflow: hidden;
}


.container {
   background: url('https://2.bp.blogspot.com/-IMQKrnFC4yQ/WVyentjwS5I/AAAAAAAABDE/eA29COvcetUTq5LeZDuqoUVH7iBtyI4LQCLcBGAs/s1600/glen-carrie-24207.jpg');
    margin-top: 100px;
    margin-left: auto;
    margin-right: auto;
  
    width: 900px;
    height: 675px;
      
    background-size: 900px 675px;
    overflow: hidden
}

.container:hover .tile{
      opacity          : 0;
      WebkitTransition : opacity 1s ease-in-out;
      MozTransition    : opacity 1s ease-in-out;
      MsTransition     : opacity 1s ease-in-out;
      OTransition      : opacity 1s ease-in-out;
      transition       : opacity 1s ease-in-out;
}