.wrapper {
  display: flex;
  height:100vh;
  font-family: "Oswald";
}
.wrapper div {
  flex-grow:1;
  transition:1s all ease-in-out;
  background-size:cover;
  background-position:center;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper div:hover {
  flex-grow:2;
}
.wrapper div::before {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  background:#333;
  transition:.3s all ease-in-out;
  z-index:2;
}
.wrapper div:hover::before {
  opacity:0;
}
.wrapper div::after {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  background:linear-gradient(to bottom right, #58A4B0, #DB504A);
  opacity:0.7;
  z-index:1;
}
h1 {
  font-weight: normal;
  text-transform: uppercase;
  position: relative;
  color:#fff;
  z-index:3;
  margin: 0;
  transition: all .3s ease-in-out;
}
.wrapper div:hover h1 {
  font-size: 80px;
  rotate:-90deg;
  translate:15vw;
  transition:
  .3s font-size ease-in-out,
  .3s rotate ease-in-out,
  .5s translate ease-in-out .5s
  ;
}
.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 {
  height: 100vh;
  font-family: 'Oswald', sans-serif;
  display: flex;
}
.wrapper > div {
  flex-grow:1;
  position: relative;
  transition:.5s all cubic-bezier(.47,1.64,.41,.8);
}
.wrapper > div:hover {
  flex-grow:1.5;
}
.wrapper > div:hover::before {
  opacity:0;
}
.wrapper > div::before {
  content:'';
  width: 100%;
  height: 100%;
  position: absolute;
  top:0;
  left:0;
  background:#333;
  z-index:1;
  transition:.5s all ease-in-out;
}
.wrapper > div:after {
  content:'';
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
  background:linear-gradient(to bottom right, #58A4B0, #DB504A);
  opacity:0.5;
}
h1 {
  font-weight: normal;
  text-transform: uppercase;
  color:#fff;
  position: absolute;
  top:50%;
  left:50%;
  translate:-50% -50%;
  z-index:2;
}

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