<img src="https://picsum.photos/id/1069/200/200" >

img {
  --b: 10px;   /* the border thickness*/
  --g: 5px;    /* the gap on hover */
  background: repeating-linear-gradient(135deg,#F8CA00 0 10px,#E97F02 0 20px,#BD1550 0 30px);
  
  --_g: #0000 90deg,#000 0;
  --_m: 
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
     var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
    conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
     0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat,
    linear-gradient(#000 0 0) content-box;
  padding: calc(var(--g) + var(--b));
  -webkit-mask: var(--_m);
          mask: var(--_m);
  transition: .3s, -webkit-mask-position .3s .3s;
  cursor: pointer;
}
img:hover {
  --_i: 100%;
  transition: .3s, -webkit-mask-size .3s .3s;
}

/* Firefox has a strange bug so we need the below until the bug is fixed */
@supports (-moz-appearance:none) {
  img {
    --_p: calc(var(--g) + var(--b));
    --_m: 
     conic-gradient(from 180deg at top    var(--b) right var(--b),var(--_g))
      var(--_i,200%) 0  /200% var(--_i,var(--b))  no-repeat,
     conic-gradient(            at bottom var(--b) left  var(--b),var(--_g))
      0   var(--_i,200%)/var(--_i,var(--b)) 200%  no-repeat,
     linear-gradient(#000 0 0) 50%/calc(100% - 2*var(--_p)) calc(100% - 2*var(--_p)) no-repeat;
  }
}

body {
  background: #e8e9ba;
  display: grid;
  grid-gap: 40px;
  height: 100vh;
  margin: 0;
  grid-auto-flow: column;
  place-content: center;
  background: #f8f8f8;
}