LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
Hover to brighten up the place.
CSS
@import url(https://fonts.googleapis.com/css?family=Yeseva+One|Roboto:400,300,100,500,700,900);
html {
  background-color: #efefef;
  font-family: 'Yeseva One';
}

body {
  height: 500px;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 100%;
  height: 100%;
}

.card {
  width: 470px;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  background-color: transparent;
  box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
}
.card:hover {
  background-position: -100% 100%;
  color: #F9F158;
}
.card:hover a.button {
  background-position: -100% 100%;
  color: White;
}
.card a.button {
  display: block;
  font: normal normal 100 1.5em 'Roboto';
  text-decoration: none;
  color: #d2d2d2;
  background-color: transparent;
  border-radius: 0 0 10px 10px;
  padding: 0.9em 0;
}

.card-title {
  padding: 30px;
  line-height: 1em;
  font-size: 4em;
  margin: 30px 0 30px 0;
}

.greybg {
  background-size: 200% 100%;
  background-image: -webkit-linear-gradient(left, transparent 50%, LightGrey 50%);
  background-image: linear-gradient(to right, transparent 50%, LightGrey 50%);
}

.darkbg {
  background-size: 200% 100%;
  background-image: -webkit-linear-gradient(left, #1e1e1e 50%, #08689b 50%);
  background-image: linear-gradient(to right, #1e1e1e 50%, #08689b 50%);
}

.lightbg {
  background-size: 200% 100%;
  background-image: -webkit-linear-gradient(left, White 50%, #2eb0f4 50%);
  background-image: linear-gradient(to right, White 50%, #2eb0f4 50%);
}

.transition {
  -webkit-transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, background-color 0.5s ease, color 0.2s ease 0s;
  transition: background-position 0.3s cubic-bezier(0.19, 1, 0.22, 1) 0.1s, background-color 0.5s ease, color 0.2s ease 0s;
}

.button-hover a span {
  position: relative;
  display: block;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.button-hover a:hover span,
.button-hover a:focus span {
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
}
Host Instantly Drag and Drop Website Builder

 

Description

I wanted to explore some possibilities with transform and transition effects.
Term
Mon, 11/27/2017 - 22:13

Related Codes

Pen ID
Pen ID
Pen ID