Adicionar href a uma imagem

[xavier1400 10]

Boas, eu tenho o seguinte código:
https://jsfiddle.net/nvuc4nnc/2/
Como podem reparar coloquei um href na imagem para um link, só que se repararem a imagem só dá para clicar na margem direita da mesma, alguém me consegue ajudar?

[Cσяvσ⋆ 1,804]

Não tem problema nenhum... corre-o no teu próprio host em vez de no jsfiddle.

[xavier1400 10]

13 minutos atrás, Cσяvσ⋆ disse:

Não tem problema nenhum... corre-o no teu próprio host em vez de no jsfiddle.

Não tem problema? o.o A imagem toda é clicável? só consigo clicar na margem direita

[Dynamic Things 965]

10 horas atrás, xavier1400 disse:

Não tem problema? o.o A imagem toda é clicável? só consigo clicar na margem direita

Na classe nome_ep2 retira a seguinte linha "position: relative;" e o teu problema ficará resolvido.

 

HTML

	<div class="episodios_tras5">
		<div class="episodios">
			<a href="https://habitosdosucesso.net/wp-content/uploads/2015/03/seguir-exemplo-2-1.jpg">
				<img src="https://habitosdosucesso.net/wp-content/uploads/2015/03/seguir-exemplo-2-1.jpg" alt="" width="300" height="289" class="alignnone size-medium wp-image-139" />
			</a>
		</div>
		<div class="nome_ep2">
			<a href="http://localhost/wordpress/?page_id=236">Temporada 1 Episódio 1</a>
		</div>
	</div>

CSS

.episodios_tras5 {
    display: block;
    float: left;
    width: 270px;
    height: 100%;
    margin: 10px;
    margin-left: 6%;
    height: 7.31707%;
    top: 12.1951%;
    color: #FFF;
}
.episodios {

    display: block;
    float: left;
    height: 300px;
	width:300px;
    top: 12.1951%;
    color: #FFF;
}
.nome_ep2 {
    display: block;
    height: 100%;
    color: #FFF;
	text-align: center;
}

[xavier1400 10]

1 hora atrás, Albert Einstein disse:

Na classe nome_ep2 retira a seguinte linha "position: relative;" e o teu problema ficará resolvido.

 

HTML

	<div class="episodios_tras5">
		<div class="episodios">
			<a href="https://habitosdosucesso.net/wp-content/uploads/2015/03/seguir-exemplo-2-1.jpg">
				<img src="https://habitosdosucesso.net/wp-content/uploads/2015/03/seguir-exemplo-2-1.jpg" alt="" width="300" height="289" class="alignnone size-medium wp-image-139" />
			</a>
		</div>
		<div class="nome_ep2">
			<a href="http://localhost/wordpress/?page_id=236">Temporada 1 Episódio 1</a>
		</div>
	</div>

CSS

.episodios_tras5 {
    display: block;
    float: left;
    width: 270px;
    height: 100%;
    margin: 10px;
    margin-left: 6%;
    height: 7.31707%;
    top: 12.1951%;
    color: #FFF;
}
.episodios {

    display: block;
    float: left;
    height: 300px;
	width:300px;
    top: 12.1951%;
    color: #FFF;
}
.nome_ep2 {
    display: block;
    height: 100%;
    color: #FFF;
	text-align: center;
}

 

Obrigado pela ajuda, problema resolvido !