LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background-color: black;
}

main {
  padding: 3vw 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.block {
  position: relative;
  border-radius: 0.25rem;
  cursor: pointer;
  width: 12rem;
  height: 8rem;
  margin: 1rem;
  -webkit-transition: all 1.5s ease, height 0s, width 0s, margin 0s;
  transition: all 1.5s ease, height 0s, width 0s, margin 0s;
  background-repeat: no-repeat;
  background-position: center;
}
@media (min-width: 640px) {
  .block {
    width: 24vw;
    height: 16vw;
    margin: 3vw;
  }
}
.block:before, .block:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  opacity: 0;
  background: inherit;
  border-radius: inherit;
  -webkit-transition: inherit;
  transition: inherit;
}

.block:nth-child(1) {
  -webkit-transition-delay: 0.33333s, 0s, 0s, 0s;
          transition-delay: 0.33333s, 0s, 0s, 0s;
}

.block:nth-child(2) {
  -webkit-transition-delay: 0.66667s, 0s, 0s, 0s;
          transition-delay: 0.66667s, 0s, 0s, 0s;
}

.block:nth-child(3) {
  -webkit-transition-delay: 1s, 0s, 0s, 0s;
          transition-delay: 1s, 0s, 0s, 0s;
}

.block:nth-child(4) {
  -webkit-transition-delay: 1.33333s, 0s, 0s, 0s;
          transition-delay: 1.33333s, 0s, 0s, 0s;
}

.block:nth-child(5) {
  -webkit-transition-delay: 1.66667s, 0s, 0s, 0s;
          transition-delay: 1.66667s, 0s, 0s, 0s;
}

.block:nth-child(6) {
  -webkit-transition-delay: 2s, 0s, 0s, 0s;
          transition-delay: 2s, 0s, 0s, 0s;
}

.block:nth-child(7) {
  -webkit-transition-delay: 2.33333s, 0s, 0s, 0s;
          transition-delay: 2.33333s, 0s, 0s, 0s;
}

.block:nth-child(8) {
  -webkit-transition-delay: 2.66667s, 0s, 0s, 0s;
          transition-delay: 2.66667s, 0s, 0s, 0s;
}

.block:nth-child(9) {
  -webkit-transition-delay: 3s, 0s, 0s, 0s;
          transition-delay: 3s, 0s, 0s, 0s;
}

.block:nth-child(10) {
  -webkit-transition-delay: 3.33333s, 0s, 0s, 0s;
          transition-delay: 3.33333s, 0s, 0s, 0s;
}

.block:nth-child(11) {
  -webkit-transition-delay: 3.66667s, 0s, 0s, 0s;
          transition-delay: 3.66667s, 0s, 0s, 0s;
}

.block:nth-child(12) {
  -webkit-transition-delay: 4s, 0s, 0s, 0s;
          transition-delay: 4s, 0s, 0s, 0s;
}

.block:nth-child(13) {
  -webkit-transition-delay: 4.33333s, 0s, 0s, 0s;
          transition-delay: 4.33333s, 0s, 0s, 0s;
}

.block:nth-child(14) {
  -webkit-transition-delay: 4.66667s, 0s, 0s, 0s;
          transition-delay: 4.66667s, 0s, 0s, 0s;
}

.block.clicked {
  -webkit-transition-delay: 0s !important;
          transition-delay: 0s !important;
}

.effect-0 {
  background-size: 0;
}
.effect-0:before {
  background-size: cover;
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
}
.effect-0:after {
  background-size: cover;
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
}
.loaded-document .effect-0.loaded-image:before, .loaded-document .effect-0.loaded-image:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.effect-1 {
  background-size: 20% auto;
  opacity: 0;
}
.effect-1:before {
  -webkit-transform: scale(0.6);
          transform: scale(0.6);
  background-size: cover;
}
.effect-1:after {
  -webkit-transform: scale(0.8);
          transform: scale(0.8);
  background-size: cover;
}
.loaded-document .effect-1.loaded-image {
  opacity: 1;
  background-size: 100% auto;
}
.loaded-document .effect-1.loaded-image:before, .loaded-document .effect-1.loaded-image:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}

.effect-2 {
  background-size: 0;
}
.effect-2:before, .effect-2:after {
  width: 50%;
  opacity: 0;
  background-size: 200% auto;
}
.effect-2:before {
  background-position: right 0;
  border-radius: 0.25rem 0 0 0.25rem;
}
.effect-2:after {
  background-position: left 0;
  left: auto;
  border-radius: 0 0.25rem 0.25rem 0;
}
.loaded-document .effect-2.loaded-image:before, .loaded-document .effect-2.loaded-image:after {
  opacity: 1;
}
.loaded-document .effect-2.loaded-image:before {
  background-position: 0 0;
}
.loaded-document .effect-2.loaded-image:after {
  background-position: right 0;
}

.effect-3 {
  background-size: 0;
}
.effect-3:before, .effect-3:after {
  opacity: 0;
}
.effect-3:before {
  background-size: cover;
  right: 50%;
  bottom: 50%;
}
.effect-3:after {
  background-size: cover;
  top: 50%;
  left: 50%;
}
.loaded-document .effect-3.loaded-image:before, .loaded-document .effect-3.loaded-image:after {
  opacity: 1;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.effect-4 {
  background-size: 0;
  overflow: hidden;
}
.effect-4:before {
  background-size: cover;
  -webkit-transform: scale(2);
          transform: scale(2);
}
.effect-4:after {
  background-size: cover;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
}
.loaded-document .effect-4.loaded-image:before, .loaded-document .effect-4.loaded-image:after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 1;
}
JS
document.addEventListener "DOMContentLoaded", ->
  document.body.classList.add('loaded-document')

for block in document.querySelectorAll('.block')
  img = new Image()
  img.block = block
  img.onload = ->
    @block.classList.add('loaded-image')
  img.src = getComputedStyle(block).backgroundImage.slice(4, -1).replace(/"/g, "")
  
  block.addEventListener 'click', ->
    @classList.add 'clicked'
    @classList.toggle 'loaded-image'

Description

I like this background-size: 0 technique, where without any additional elements you can create something really nice.
Term
Wed, 12/06/2017 - 19:43

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv