Skip to content

Instantly share code, notes, and snippets.

@bbarrows
Created September 28, 2017 21:09
Show Gist options
  • Save bbarrows/61de727b5395b69db7061d3aa0a9d946 to your computer and use it in GitHub Desktop.
Save bbarrows/61de727b5395b69db7061d3aa0a9d946 to your computer and use it in GitHub Desktop.
MuchCleanerOpaqueTileHoverAway
/* 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
@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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment