LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


































































CSS
/* GLOBAL */
.nav {
  margin: 0 0 10px;
}
.nav h2 {
  display: inline-block;
  font-size: 16px;
}
.nav ul {
	display: inline-block;
  vertical-align: middle;
  list-style: none;
  padding: 0;
  margin: 0 0 0 10px;
  overflow: hidden;
}
.nav li {
  float: left;
  margin: 0 0 0 10px;
}
.nav li:first-child {
  margin-left: 0;
}
.nav a {
  display: block;
  text-decoration: none;
  color: #333;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  position: relative;
}
.nav .active a {
  background: #333;
  color: #fff;
}
.nav .active a:before,
.nav .active a:after {
  content: none;
}

/* COVER */
.nav-cover a {
  overflow: hidden;
}
.nav-cover a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  transform: translateY(-101%);
  transition: transform 0.3s;
}
.nav-cover a:hover:before {
  transform: translateZ(0);
}

.nav-cover-bottom a:before {
  transform: translateY(101%)
}

.nav-cover-left a:before {
  transform: translateX(-101%);
}

.nav-cover-right a:before {
  transform: translateX(101%);
}

/* DOUBLE COVER FADE */
.nav-doublecoverfade a {
  overflow: hidden;
}
.nav-doublecoverfade a:before,
.nav-doublecoverfade a:after {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
	opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-doublecoverfade a:before {
  transform: translateY(-101%);
}
.nav-doublecoverfade a:after {
  transform: translateY(101%);
}
.nav-doublecoverfade a:hover:before,
.nav-doublecoverfade a:hover:after {
	opacity: 1;
	transform: translateZ(0);
}

.nav-doublecoverfade-h a:before {
  transform: translateX(-101%);
}
.nav-doublecoverfade-h a:after {
  transform: translateX(101%);
}

.nav-doublecoverfade-tl a:before {
  transform: translateX(-101%);
}
.nav-doublecoverfade-tl a:after {
  transform: translateY(-101%);
}

.nav-doublecoverfade-tr a:before {
  transform: translateX(101%);
}
.nav-doublecoverfade-tr a:after {
  transform: translateY(-101%);
}

.nav-doublecoverfade-bl a:before {
  transform: translateX(-101%);
}
.nav-doublecoverfade-bl a:after {
  transform: translateY(101%);
}

.nav-doublecoverfade-br a:before {
  transform: translateX(101%);
}
.nav-doublecoverfade-br a:after {
  transform: translateY(101%);
}

/* REVEAL */
.nav-reveal a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  overflow: hidden;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  
  transition: height 0.3s;
}
.nav-reveal a:hover:before {
  height: 100%;
}

/* PUSH */
.nav-push a {
  color: transparent;
  overflow: hidden;
}
.nav-push a:before,
.nav-push a:after {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  transform: translateZ(0);
  transition: transform 0.3s;
}
.nav-push a:before {
  background: #333;
  color: #fff;
  transform: translateY(-101%);
}
.nav-push a:after {
  color: #333;
}
.nav-push a:hover:before {
	transform: translateZ(0);
}
.nav-push a:hover:after {
  transform: translateY(101%);
}

.nav-push-bottom a:before {
  transform: translateY(101%);
}
.nav-push-bottom a:hover:after {
  transform: translateY(-101%);
}

.nav-push-left a:before {
  transform: translateX(-101%);
}
.nav-push-left a:hover:after {
	transform: translateX(101%);
}

.nav-push-right a:before {
  transform: translateX(101%);
}
.nav-push-right a:hover:after {
	transform: translateX(-101%);
}

/* ROTATE */
.nav-rotate ul {
  overflow: visible;
  height: 30px;
}
.nav-rotate a {
	color: transparent;
  perspective: 300px;
}
.nav-rotate a:before,
.nav-rotate a:after {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  transform-origin: 50% 50% -15px;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.3s;
}
.nav-rotate a:before {
  background: #333;
  color: #fff;
  transform: rotateX(91deg);
}
.nav-rotate a:after {
  color: #333;
}
.nav-rotate .active a:before,
.nav-rotate .active a:after {
	content: '';
}
.nav-rotate a:hover:before {
  transform: rotateX(0);
}
.nav-rotate a:hover:after {
  transform: rotateX(-91deg);
}

.nav-rotate-bottom a:before {
  transform: rotateX(-91deg);
}
.nav-rotate-bottom a:hover:after {
  transform: rotateX(91deg);
}

/* COVER 3D */
.nav-cover3d ul {
  overflow: visible;
  height: 30px;
}
.nav-cover3d a {
  perspective: 300px;
}
.nav-cover3d a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  transform-origin: 50% 0;
  backface-visibility: hidden;
  transition: transform 0.3s;
  background: #333;
  color: #fff;
  transform: rotateX(91deg);
}
.nav-cover3d a:hover:before {
	transform: translateZ(0);
}

.nav-cover3d-bottom a:before {
  transform-origin: 50% 100%;
  transform: rotateX(-91deg);
}

.nav-cover3d-left a:before {
  transform-origin: 0 50%;
  transform: rotateY(-91deg);
}

.nav-cover3d-right a:before {
  transform-origin: 100% 50%;
  transform: rotateY(91deg);
}

/* ZOOM IN */
.nav-zoomin ul {
  overflow: visible;
  height: 30px;
}
.nav-zoomin a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  opacity: 0;
  transform: scale(0.8);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-zoomin a:hover:before {
  transform: none;
  opacity: 1;
}

/* ZOOM OUT */
.nav-zoomout ul {
  overflow: visible;
  height: 30px;
}
.nav-zoomout a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  opacity: 0;
  transform: scale(1.2);
  transition: transform 0.3s, opacity 0.3s;
}
.nav-zoomout a:hover:before {
  transform: none;
  opacity: 1;
}

/* STRETCH */
.nav-stretch a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  transform: scaleY(0) translateZ(0);
  transition: transform 0.3s;
}
.nav-stretch a:hover:before {
	transform: none;
}

.nav-stretch-h a:before {
  transform: scaleX(0) translateZ(0);
}

.nav-stretch-top a:before {
	transform-origin: 50% 0;
}
.nav-stretch-bottom a:before {
	transform-origin: 50% 100%;
}
.nav-stretch-left a:before {
	transform-origin: 0 50%;
}
.nav-stretch-right a:before {
	transform-origin: 100% 50%;
}

/* DOUBLE STRETCH FADE */
.nav-doublestretchfade a:before,
.nav-doublestretchfade a:after {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  opacity: 0;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-doublestretchfade a:before {
  transform: scaleX(0) translateZ(0);
}
.nav-doublestretchfade a:after {
  transform: scaleY(0) translateZ(0);
}
.nav-doublestretchfade a:hover:before,
.nav-doublestretchfade a:hover:after {
	transform: none;
  opacity: 1;
}

.nav-doublestretchfade-tl a:before {
  transform-origin: 0 50%;
}
.nav-doublestretchfade-tl a:after {
  transform-origin: 50% 0;
}
.nav-doublestretchfade-tr a:before {
  transform-origin: 100% 50%;
}
.nav-doublestretchfade-tr a:after {
  transform-origin: 50% 0;
}
.nav-doublestretchfade-bl a:before {
  transform-origin: 0 50%;
}
.nav-doublestretchfade-bl a:after {
  transform-origin: 50% 100%;
}
.nav-doublestretchfade-br a:before {
  transform-origin: 100% 50%;
}
.nav-doublestretchfade-br a:after {
  transform-origin: 50% 100%;
}

/* SPIN FADE */
.nav-spinfade ul {
  overflow: visible;
  height: 30px;
}
.nav-spinfade a {
  perspective: 100px;
}
.nav-spinfade a:before {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  backface-visibility: hidden;
  transition: transform 0.3s, opacity 0.3s;
  background: #333;
  color: #fff;
  opacity: 0;
  transform: rotateX(90deg);
}
.nav-spinfade a:hover:before {
	transform: translateZ(0);
  opacity: 1;
}

.nav-spinfade-reverse a:before {
  transform: rotateX(-90deg);
}

.nav-spinfade-h a:before {
  transform: rotateY(90deg);
}

.nav-spinfade-reverse-h a:before {
  transform: rotateY(-90deg);
}

/* DOUBLE SPIN FADE */
.nav-doublespinfade ul {
  overflow: visible;
  height: 30px;
}
.nav-doublespinfade a {
  perspective: 100px;
  background: #fff;
}
.nav-doublespinfade a:before,
.nav-doublespinfade a:after {
  content: attr(data-value);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 10px;
  box-sizing: border-box;
  backface-visibility: hidden;
  transition: transform 0.3s, opacity 0.3s;
  background: #333;
  color: #fff;
  opacity: 0;
}
.nav-doublespinfade a:before {
  transform: rotateX(-90deg);
}
.nav-doublespinfade a:after {
  transform: rotateX(90deg);
}
.nav-doublespinfade a:hover:before,
.nav-doublespinfade a:hover:after {
	transform: translateZ(0);
  opacity: 1;
}

.nav-doublespinfade-h a:before {
  transform: rotateY(-90deg);
}
.nav-doublespinfade-h a:after {
  transform: rotateY(90deg);
}

.nav-doublespinfade-vh a:before {
  transform: rotateX(90deg);
}
.nav-doublespinfade-vh a:after {
  transform: rotateY(90deg);
}

.nav-doublespinfade-vrh a:before {
  transform: rotateX(-90deg);
}
.nav-doublespinfade-vrh a:after {
  transform: rotateY(90deg);
}

.nav-doublespinfade-vhr a:before {
  transform: rotateX(90deg);
}
.nav-doublespinfade-vhr a:after {
  transform: rotateY(-90deg);
}

.nav-doublespinfade-vrhr a:before {
  transform: rotateX(-90deg);
}
.nav-doublespinfade-vrhr a:after {
  transform: rotateY(-90deg);
}
Host Instantly Drag and Drop Website Builder

 

Description

Exprimenting hover transitions (for menu items) using CSS only
Term
Mon, 11/27/2017 - 22:09

Related Codes

Pen ID
Pen ID
Pen ID