Someone coded a flip box with CSS transform. It works fine in Safari and Firefox, but not in Chrome. In Chrome it continues to display the image and skews it. I tried several things in the CSS (labeled "Extra Code START") but it's not working. How do I just make the image disappear or fix this?

I made a codepen: https://codepen.io/harmjoy/pen/ExwVarv

.collection-type-index #call-to-actions {
     background:rgba(2,139,255,1)
}
 .collection-type-index #our-programs-1 {
     background:#f0f0f0
}
 .flip {
     margin: 30px auto;
     position: relative;
     width: 300px;
     height: 200px;
     color: #000;
     text-align:center;
}
 .flip h1 {
     font-size: 30px;
     font-weight: bold;
     line-height:98px;
     margin:0;
     padding:0;
}
 .flip h2 {
     font-size: 21px;
     font-weight: bold;
     margin: 0;
     padding: 0 0 12px;
}
 .flip p {
     font-size: 14px;
     padding: 5px 0px;
     margin: 0 0 8px 0;
}
 .default-state, .active-state {
  height: 200px;
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 0.4s ease;
  transform-origin: center center -50px;
  -webkit-transform-origin: center center -50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 .default-state {
     transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     -ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
     height: 100%;
     display: flex;
}
 .default-state img {
     position: relative;
     flex-shrink: 0;
}
 .default-state h2 {
     position: absolute;
     z-index: 2;
     color: #fff;
     text-transform: uppercase;
     width: 100%;
     align-self: center;
     text-shadow: 0px 1px 10px rgba(0, 0, 0, 1);
}
 .active-state {
     transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -webkit-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -moz-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -o-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
     -ms-transform: perspective(1000px) rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
}

 .flip:hover .default-state {
    height:200px;
    width:300px;
     transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -webkit-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -moz-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -o-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
     -ms-transform: perspective(0px) rotateX(90deg) rotateY(0) rotateZ(0deg);
}
 .flip:hover .active-state {
    height:200px;
    width:300px;
     z-index: 99999;
     transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -webkit-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -moz-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -o-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
     -ms-transform: perspective(1000px) rotateX(0deg) rotateY(0deg) rotateZ(0);
}

/* Extra Code START */
.flip:hover .active-state,
.flip:hover .default-state {
  transform-origin: none;
  -webkit-transform-origin: none !important;
}

.flip:hover .active-state img,
.flip:hover .default-state img {
  display: none !important;
}
/* Extra Code END */

 a.btn {
     background: #013b59;
     color: #ffffff;
     font-size: 14px;
     padding: 8px 20px 8px 20px;
     text-decoration: none;
}
 a.btn:hover {
     background: #33627a;
     text-decoration: none;
}
.blog-item-wrapper .post-title { display: none; }

<div class="flip" id="yui_3_17_2_1_1638546693755_910">
    <div class="active-state" id="yui_3_17_2_1_1638546693755_909">
        <h2>Hope After School</h2>
        <a class="btn" href="/hope-after-school" id="yui_3_17_2_1_1638546693755_908">Learn More</a>
    </div>
    <div class="default-state">
        <h2>After-School Programs</h2>
        <img src="https://static1.squarespace.com/static/5b0ff9af3e2d099669c3dc55/5b1001a688251b1ccbfd906e/5b1004112b6a28f09dc1af7d/1527776479763/child-865116_1920.jpg?format=750w" alt="Childcare">
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

In my chrome browser there indeed was some strange artefact of the image visible although not recognisable as the image anymore. I fixed it with * { backface-visibility: hidden; } out of laziness, which worked fine but you would probably want to apply this only to the elements being transformed. backface-visibilty precisely handles the see-throughness os 3D elements which is what you are dealing with here.