Как сделать такую вещь при наведении на картинку

Можно вроде, ставьте тут:

figcaption { 
  position: absolute; 
  top: 0; 
  left: 0; 
  width: 300px; 
  height: 200px; 
background: url(image.jpg);
  opacity: 0; 
  transition: opacity .7s; 
  cursor: pointer; 

} 

figure:hover figcaption { 
  opacity: 1; 
}

Это если по примеру выше, просто фон меняйте на изображение background: url(image.jpg);

Если я вас правильно понял... а то светало, мозг начинает работать вяло :)

Не знаю что делает transition: opacity .7s; Для меня оно ново :)

Если делать чисто css, и по приведённому вами коду (без классов), то можно так:

https://jsfiddle.net/uf8pfa29/

Возможно стоит ограничить селекторы определённым блоком, чтобы лишнего не затронуло, т.е. так:

.block a[href$=".jpg"]{...}

.block a[href$=".jpg"]:after{...}

.block a[href$=".jpg"]:hover:after{...}