Difference between revisions of "Team:SZU-China/Human Practices"

Line 6: Line 6:
 
</head>
 
</head>
 
<style>
 
<style>
 +
.portfolio-item {
 +
  display: block;
 +
  position: relative;
 +
  overflow: hidden;
 +
  max-width: 530px;
 +
  margin: auto auto 1rem;
 +
}
  
 +
.portfolio-item .caption {
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: rgba(33, 37, 41, 0.2);
 +
  position: absolute;
 +
  top: 0;
 +
  bottom: 0;
 +
  z-index: 1;
 +
}
 +
 +
.portfolio-item .caption .caption-content {
 +
  color: #fff;
 +
  margin: auto 1rem 1rem;
 +
}
 +
 +
.portfolio-item .caption .caption-content h2 {
 +
  font-size: 2rem;
 +
  /*text-transform: uppercase;*/
 +
}
 +
 +
.portfolio-item .caption .caption-content p {
 +
  font-weight: 400;
 +
  font-size: 1.2rem;
 +
}
 +
 +
@media (min-width: 992px) {
 +
  .portfolio-item {
 +
    max-width: none;
 +
    margin: 0;
 +
  }
 +
  .portfolio-item .caption {
 +
    -webkit-transition: -webkit-clip-path 0.25s ease-out, background-color 0.7s;
 +
    -webkit-clip-path: inset(0px);
 +
    clip-path: inset(0px);
 +
  }
 +
  .portfolio-item .caption .caption-content {
 +
    -webkit-transition: opacity 0.25s;
 +
    transition: opacity 0.25s;
 +
    margin-left: 2.5rem;
 +
    margin-right: 2.5rem;
 +
    margin-bottom: 3rem;
 +
  }
 +
  .portfolio-item img {
 +
    -webkit-transition: -webkit-clip-path 0.25s ease-out;
 +
    -webkit-clip-path: inset(-1px);
 +
    clip-path: inset(-1px);
 +
  }
 +
  .portfolio-item:hover img {
 +
    -webkit-clip-path: inset(2rem);
 +
    clip-path: inset(2rem);
 +
  }
 +
  .portfolio-item:hover .caption {
 +
    background-color: rgba(29, 128, 159, 0.9);
 +
    -webkit-clip-path: inset(2rem);
 +
    clip-path: inset(2rem);
 +
  }
 +
}
 
</style>
 
</style>
 
 

Revision as of 07:03, 8 October 2018

HP