LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
*{
  margin: 0;
  padding: 0;
	outline: none;
	border: none;
	box-sizing: border-box;
}

*:before,
*:after{-webkit-box-sizing: border-box;}

.wrap{margin: 20px 10%;}
html, body{min-height: 100%;}

body{
	background-image: radial-gradient(lightgray 0%, gray 100%);
}

ul{list-style: none; margin: 0 auto; display: table;}
li{display: inline-block; margin: 20px 20px;}

img{
	border: solid 10px black;
	transition: all .3s ease;
}
.overlay li{position: relative;}

.overlay-transition{
	width: 321px;
	height: 220px;
	position: absolute;
	top: 0;
	cursor: pointer;
}

.overlay-transition ul{position: relative;}

.overlay-transition ul li{
	display: list-item;
	float: left;
	margin:0;
}

.overlay-item{
	width: 32px;
	height: 22px;
	background: rgba(0,0,0,.9);
	transition: all .4s ease-in-out;
}

.overlay-transition:hover ul li div{background: transparent;}
.delay-1{-webkit-transition-delay: .04s;}
.delay-2{-webkit-transition-delay: .08s;}
.delay-3{-webkit-transition-delay: .12s;}
.delay-4{-webkit-transition-delay: .16s;}
.delay-5{-webkit-transition-delay: .20s;}
.delay-6{-webkit-transition-delay: .24s;}
.delay-7{-webkit-transition-delay: .28s;}
.delay-8{-webkit-transition-delay: .32s;}
.delay-9{-webkit-transition-delay: .36s;}
.delay-10{-webkit-transition-delay: .40s;}
JS
/*
for full view : https://codepen.io/ImBobby/full/Gkidn
*/
Host Instantly Drag and Drop Website Builder

 

Description

CSS3 images transition hover. inspired by http://jobyj.in/adipoli/#demo, images from lorempixel.com. for full view: http://codepen.io/ImBobby/full/Gkidn
Term
Mon, 11/27/2017 - 22:08

Related Codes

Pen ID
Pen ID
Pen ID