The source code for the image frame hover effect 1 variation

variation-image-frame-hover-effect-1

selector img {
  --b: var(--bb-attr--border, 5px); /* border thickness */
  --c: #0000 25%,var(--bb--attr--accent-color, var(--wp--preset--color--primary, #1a4548)) 0; /* define the color here */
  --s: var(--bb-attr--size, 50px);
  --p: var(--bb-attr--padding, 10px);
  --t: var(--bb-attr--transition, .6s);
  padding: var(--p);
  background:
    conic-gradient(from 90deg  at top    var(--b) left  var(--b),var(--c)) 0    0,
    conic-gradient(from 180deg at top    var(--b) right var(--b),var(--c)) 100% 0,
    conic-gradient(from 0deg   at bottom var(--b) left  var(--b),var(--c)) 0    100%,
    conic-gradient(from -90deg at bottom var(--b) right var(--b),var(--c)) 100% 100%;
  background-size: var(--s) var(--s); /* adjust border length here */
  background-repeat: no-repeat;
  transition: var(--t);
  cursor: pointer;
}

selector img:hover {
  background-size: 51% 51%;
}