.wrapper {
  display: flex;
  height: 100vh;
  font-family: "Oswald";
  text-transform: uppercase;

}
.wrapper > div {
  width: 25%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-size:cover;
  background-position:center;
  transition:.3s all ease-in-out;
  position: relative;
  overflow: hidden;
}
.wrapper > div:hover {
  width:100%;
}

.work1 {
  background-image:url('../images/wedding.jpg');
}
.work2 {
  background-image:url('../images/trail.png');
}
.work3 {
  background-image:url('../images/boats.jpg');
}
.work4 {
  background-image:url('../images/corn-flakes.jpg');
}

.wrapper>div::before{
  content:'';
  position:absolute;
  width: 100%;
  height: 100%;
  background-color: #333;
  top:0;
  left:0;
  opacity: 1;
  transition:.3s all ease-in-out;
  z-index:1;
}

.wrapper>div:hover::before{
  opacity: 0;
}

.wrapper>div::after {
  content:'';
  position:absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
  top:0;
  left:0;
  opacity:0.3;
}

h1 {
  font-weight: normal;
  font-size: 26px;
  color:#fff;
  z-index: 2;
  transition: 0.2s all ease-in-out;
  white-space:nowrap;
}

.wrapper>div:hover h1{
  rotate: -90deg;
  margin-left: 90%;
  font-size: 36px;
  transition: rotate 0.5s ease-in-out, font-size 0.5s ease-in-out, margin 0.5s ease-in-out 1s;
}