LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
#pack1 {
  float: left;
  clear: both;
}
#pack1:target {
  transform: translate(78px, 105px);
}
#pack2 {
  float: right;
}
#pack2:target {
  transform: translate(-78px, 105px);
}
#pack3 {
  float: left;
  clear: both;
}
#pack3:target {
  transform: translate(78px, -105px);
}
#pack4 {
  float: right;
}
#pack4:target {
  transform: translate(-78px, -105px);
}
#container {
  position: relative;
  margin: auto;
  width: 310px;
  padding: 10px;
  background: #999;
}
#container:after {
  content: '';
  display: block;
  clear: both;
}
.screenItem {
  background: green;
  position: relative;
  height: 190px;
  width: 135px;
  margin: 10px;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -ms-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
}
:target {
  background: red;
  z-index: 100;
  box-shadow: #000 0px 0px 30px 5px;
}
Host Instantly Drag and Drop Website Builder

 

Description

play around with target: selector in addition with css3 transitions
Term
Mon, 11/27/2017 - 22:10

Related Codes

Pen ID
Pen ID
Pen ID