<img src="https://picsum.photos/id/152/200/200" alt="some flowers">

@property --a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@property --o {
  syntax: "<number>";
  inherits: false;
  initial-value: 0;
}

img {
  --c: 22px; /* size of the border and circles */
  --g: 7px;  /* the gap*/
  --c1: #1693A7;
  --c2: #C8CF02;
  --c3: #E6781E;
  --c4: #CC0C39;
  
  padding: calc(var(--c) + var(--g));
  border-radius: 50%;
  cursor: pointer;
  --_s: /var(--c) var(--c) no-repeat;
  background:
    calc(50%*(1 + cos(var(--a) +   0deg))) calc(50%*(1 + sin(var(--a) +   0deg)))
    var(--_s) radial-gradient(var(--c1) 71%,#0000 72%), 
    calc(50%*(1 + cos(var(--a) +  90deg))) calc(50%*(1 + sin(var(--a) +  90deg))) 
    var(--_s) radial-gradient(var(--c2) 71%,#0000 72%), 
    calc(50%*(1 + cos(var(--a) -  90deg))) calc(50%*(1 + sin(var(--a) -  90deg)))
    var(--_s) radial-gradient(var(--c3) 71%,#0000 72%),
    calc(50%*(1 + cos(var(--a) + 180deg))) calc(50%*(1 + sin(var(--a) + 180deg)))
    var(--_s) radial-gradient(var(--c4) 71%,#0000 72%),
    conic-gradient(
      var(--c3)                 var(--a),  #0000 0 90deg,
      var(--c1) 0 calc(90deg  + var(--a)), #0000 0 180deg,
      var(--c2) 0 calc(180deg + var(--a)), #0000 0 270deg,
      var(--c4) 0 calc(270deg + var(--a)), #0000 0
    );
  -webkit-mask: 
    radial-gradient(50% 50%,
      #000  calc(99% - var(--c) - var(--g)),
      #0000 calc(100% - var(--c) - var(--g)) calc(99% - var(--c)),
      rgb(0 0 0/var(--o))  calc(100% - var(--c)));
  transition: --a 0s .2s,--o .2s,transform .2s;
}
img:hover {
  --a: 90deg;
  --o: 1;
  transform: scale(1.2);
  transition: --a .5s,--o .1s,transform .5s;
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-content: center;
  background: #eee;
}