.wrap {
    position: relative;
    width: 1500px;
    height: 600px;
    margin: 20px auto;
    cursor: pointer;
    overflow: hidden;
    // border:5px solid red;
    // box-shadow:0 0 20px rgba(0,0,0,0.5)
  }
  .scene {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    // width: 500px;
    // height: 500px;
    background: #1d1f20;
    text-align: center;
    overflow: hidden;
    background: url("../img/1080ppi/CIUDAD_ZENDA_BLANCO.png") 50% 50% no-repeat;
    filter: invert(70%) sepia(14%) saturate(1801%) hue-rotate(230deg) brightness(93%) contrast(84%);
    background-size: 1500px 600px;
    filter: blur(10px);
  }
  .viewer {
    z-index: 8;
    position: absolute;
    width: 150px;
    height: 150px;
    background: url("../img/1080ppi/CIUDAD_ZENDA_BLANCO.png") 50% 50% no-repeat;
    filter: invert(70%) sepia(14%) saturate(1801%) hue-rotate(230deg) brightness(93%) contrast(84%);
    background-size: 1500px 600px;
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s ease;
  }
  .wrap:hover .viewer {
    opacity: 1;
  }