LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Hover up and down and click on items
No transition
.25s transition on li
.25s transition on li
0s transition on li:hover
0s transition on li:active
.25s transition on li
.0625s transition on li:hover
0s transition on li:active
CSS
html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: white;
  font: smaller sans-serif;
  color: dimgray;
}

header {
  font-size: larger;
  padding: 2rem 0;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
}

figure {
  text-align: center;
  width: 12rem;
  margin: .5rem;
}
figure figcaption {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 4rem;
}

ul {
  display: flex;
  flex-direction: column;
  height: 14rem;
  color: gray;
}
ul li {
  flex: 1;
  margin: 1px;
  border-radius: .125rem;
  background: gainsboro;
  cursor: pointer;
}
ul li:hover {
  background: limegreen;
}
ul li:active {
  opacity: .3;
  transform: scale3d(1.5, 2, 1);
  background: dodgerblue;
}

code {
  font-family: monospace;
  font-weight: bold;
  color: black;
}

figure:nth-child(1) {
  width: 8rem;
}

figure:nth-child(2) li {
  transition: 0.25s;
}

figure:nth-child(3) li {
  transition: 0.25s;
}
figure:nth-child(3) li:hover {
  transition: 0;
}

figure:nth-child(4) li {
  transition: 0.25s;
}
figure:nth-child(4) li:hover {
  transition: 0.0625s;
}
figure:nth-child(4) li:active {
  transition: 0;
}
Host Instantly Drag and Drop Website Builder

 

Description

Use different transition durations on hover and active.
Term
Mon, 11/27/2017 - 22:08

Related Codes

Pen ID
Pen ID
Pen ID