zsimo

/**
 * flip card with border
 */

div {
  height: 150px;
  width: 150px;
  transition: all 500ms ease;
}
.container {

zsimo

/**
 * The first commented line is your dabblet’s title
 */

.base {
  width: 100px;
  height: 100px;
  background: teal;
  display: inline-block;
  margin: 0;

zsimo

/*pseudo class*/
.default {
  position: absolute;top: 100px;left: 100px;
  height: 100px;
  width: 100px;
  background-color: rgba(0, 0, 0, .8);
  color: white;
  font-size: 46px;
  -webkit-transition: all 500ms ease-in;
}

zsimo

/**
 * test
 */
.default {
  height: 100px;
  width: 100px;
  border-radius: 2px;
  background-color: red;
  z-index: 1;
  transition: all 500ms ease;