p {
  margin: 0;
  padding: 0;

}
.fondo{
  background: url(img/01.png);
}
.fondo-2{
  background: url(img/02.png);
}
i{
  color: #fff;
}
.content-item {
  background-size: cover;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  height: 300px;
  margin: 20px auto;
  overflow: hidden;
  position: relative;
  width: 400px;
}
.content-item .overlay {
  border-bottom: 100px solid #CE0082 ;
  border-left: 100px solid transparent;
  bottom: 0;
  height: 0;
  opacity: 0.95;
  position: absolute;
  right: 0;
  text-indent: -9999px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
  width: 0;
}
.content-item:hover .overlay {
  border-bottom: 800px solid #CE0082 ;
  border-left: 800px solid transparent;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .corner-overlay-content {
  bottom: 21px;
  color: #333;
  position: absolute;
  right: 25px;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item:hover .corner-overlay-content {
  opacity: 0;
  -moz-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  -webkit-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.content-item .overlay-content {
  text-align: left;
  font-family: "Open Sans", sans-serif;
  font-size: 1rem;
  bottom: 0;
  color: #fff;
  left: 0;
  opacity: 0;
  padding: 20px 30px;
  position: absolute;
  right: 0;
  top: 0;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
    
}
.content-item .overlay-content h2 {
  border-bottom: 1px solid #fff;
  font-family: "Open sans", sans-serif;
  font-size: 23px;
  padding: 0 0 12px;
}
.content-item:hover .overlay-content {
  opacity: 1;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

body {
  display: flex;
  margin: 0;
  place-items: center;
}