css resme link ekleme? (yardım)

Merhaba bir resme link ekleyeceğim fakat üstüne gelince hoverda content olduğundan link verilmiyor.

CSS Kodu:

.list li:after {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 195px;
  content: '\f144';
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  opacity: 0;
  color: #FFF;
  font-size: 40px;
  display: block;
  cursor: pointer;
  line-height: 195px;
  text-align: center;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
}

HTML KODU:

	<ul class="list">	
		<li>
			
		<img src="resim.png" alt="" class="cover" />

</li>
</ul>

z-index değeri verebilirsin.

afteri arkaya al

o konuda pek bilgim yok nasıl yapabilirim?

http://codepen.io/anon/pen/avoGeG

hocam malesef olmamış, hem şekil olarak dışarı taştı hemde halen tıklanmıyor

şekil olarak dışarı taşan nedir? ben resme tıklayabiliyorum

Hocam site adresinizi yazın ona göre yardımcı olmaya çalışalım.

site localde ama istediğim şu tasarımda içerik olan resimlere link vermek

<a href="deneme"><li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/22043/2014-03-08_140412_oavbye_1.png" alt="" class="cover" />
<p class="title">Sin City: A Dame To Kill For</p>
<p class="genre">Action, Crime</p>
</li></a>