#main1{
 position:relative;
}
.new{
  position: fixed;
  overflow: hidden;
    top: 9%;
    right: 0%;
    z-index: 9999;
    opacity: 0.9;
        border: solid 8px #989ba0;
            background-color: rgba(0,0,0,0.2);
}

img.newimg {
    width: 26vw;
    height: auto;
}
.new:hover{
  opacity: 1.0;
}


.new:before,
.new:after {
  animation: 4s cubic-bezier(.4, 0, .2, 1) forwards;
  background: #fff;
  content: '';
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  z-index: 1;
}

.new:before {
  animation-name: img-wrap-before;
  top: 0;
  bottom: 50%;
}

.new:after {
  animation-name: img-wrap-after;
  top: 50%;
  bottom: 0;
}

@keyframes img-wrap-before {
  100% {
    transform: translateX(100%);
  }
}

@keyframes img-wrap-after {
  100% {
    transform: translateX(-100%);
  }
}