SCSS - добавить переход к элементу after

Question

Я хочу добавить переход к элементу after при наведении курсора, проблема в том, что он не работает. Я хочу навести курсор на изображение, добавить цвет фона и применить переход на .5s. Контент предназначен только для тестирования.

.imageGallery1 {
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  position: relative;

  &:hover {
    &::after {
      content: '>';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $main-color;
      opacity: 0.3;
      transition: 0.5s;
    }
  }
}

Answer 1

Я сделал что-то подобное, и это работает!

& a {
    position: relative;
    display: inline-block;
    height: 100%;
    z-index: 1090;
    &::after {
      content: '>';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: $main-color;
      opacity: 0;
      transition: 0.5s opacity;
      cursor: pointer;
    }
    &:hover::after {
      opacity: 0.3;
    }
  }

Answer 2

Кажется, отлично работает на https://codepen.io/anon/pen/MZNjeZ, предполагая, что контейнер .imageGallery1 имеет размеры (width, height), так что он может расширяться до 100% его.