LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
html, body {
  height: 100%;
}

body {
  background: #2c3e50;
  display: flex;
}

.card {
  width: 350px;
  padding: 30px;
  background: #1abc9c;
  margin: auto;
  transition: .3s ease;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}
.card:hover {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
  transform: translateY(-10px) scale(1.02);
}
.card:hover .entry-title {
  background-position: -100% 0;
}

.entry-title {
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 50%, #16a085 50%);
  background-size: 200%;
  background-position: 0 0;
  display: inline;
  transition: .5s ease-in-out;
  font-family: raleway, arial, sans-serif;
  text-transform: uppercase;
}
.entry-title a {
  color: white;
  text-decoration: none;
}

small {
  margin-top: 20px;
  display: block;
  font-family: raleway, arial, sans-serif;
  color: white;
  text-transform: uppercase;
}
small a {
  font-weight: 700;
  color: white;
  text-decoration: none;
}

span {
  display: block;
  margin-top: 10px;
  font-family: raleway, arial, sans-serif;
  font-weight: 700;
  color: #16a085;
}
span a {
  color: white;
}
Host Instantly Drag and Drop Website Builder

 

Description

This pen was inspired by webdesignerdepot's new design, the title on each article will be highlighted when user hovered it.
Term
Mon, 11/27/2017 - 21:35

Related Codes

Pen ID
Pen ID
Pen ID