Errore mio outline viene applicato ma appare comunque sotto i contenuti Quando lo applichi al contenitore risulta quindi nascosto dall'immagine stessa che gli sta dentro.

A questo punto puoi risolvere impostando opportunamente uno pseudo elemento al contenitore.

Non serve aggiungere ulteriori contenitori, basta quello più prossimo all'immagine.

Rimuovi pure gli outline che avevi già applicato, imposta position:relative per .img-parent (lasciando pure overflow:hidden) e definisci lo pseudo-elemento ::before: con position:absolute. Quindi estendi questo per tutta la dimensione disponibile e applicagli un "semplice" bordo al posto di outline.

Qui un esempio di come potresti fare:

codice:
.img-parent {
  overflow: hidden;
  position: relative;
}
.img-parent::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
  border: 0px solid #fff;
  opacity: 0;
  transition: .2s ease-in;
}
.link:hover .img-parent::before {
  opacity: .5;
  border-width: 12px;
}
Fai sapere, se hai bisogno di chiarimenti chiedi pure.
Buon proseguimento e Buone Feste!