.development-item {
  margin-bottom: 30px; }
  .development-item .development-item-image a img {
    height: auto;
    width: 100%; }
  .development-item .development-item-content {
    /* background-color: rgba(255,255,255,0.6); */
    background-image: url(../img/bg_hex.png);
    background-position: center;
    bottom: 0;
    color: white;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0; }
    .development-item .development-item-content .title {
      background-color: rgba(30, 30, 30, 0.9);
      left: 0px;
      opacity: 0;
      padding: 20px;
      position: absolute;
      right: 0px;
      text-align: center;
      bottom: 43px;
      transform: translateY(-60px); }
      .development-item .development-item-content .title a {
        color: #ffffff; }
    .development-item .development-item-content .type {
      background-color: rgba(0, 0, 0, 0.9);
      left: 0px;
      opacity: 0;
      padding: 5px;
      position: absolute;
      right: 0px;
      text-align: center;
      bottom: 5px;
      transform: translateY(60px); }
      .development-item .development-item-content .type a {
        color: #ffffff; }
  .development-item:hover .development-item-content {
    opacity: 1;
    transition: all 0.15s ease-in-out; }
    .development-item:hover .development-item-content .title {
      opacity: 1;
      transform: translateY(0px);
      transition: all 0.15s ease-in-out;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s; }
    .development-item:hover .development-item-content .type {
      opacity: 1;
      transform: translateY(0px);
      transition: all 0.15s ease-in-out;
      -webkit-transition-delay: 0.15s;
      transition-delay: 0.15s; }