HTML + CSS Problema com o redimensionamento de imagens

[RodolfoFerr]

Bom dia a todos. Estou com alguns problemas.

Tenho 4 imagens alinhadas lado a lado. Com estilo hover, que diminui a opacidade da imagem e aparece uma frase por cima. O problema é que não consigo alterar o tamanho da imagem corretamente. Aliás consigo alterar o tamanho da imagem, mas o estilo hover continua do mesmo tamanho ou então não funciona corretamente.

Gostaria de saber qual será a melhor maneira de resolver esse problema?

Aqui fica parte do codigo html:

<nav id="border">
<ul class="photo">
<li class="li">
<a href="#">
<figure class="figure">
<img class="img" src="CSS/Imagens/pintura_auto2.jpg" alt="Imagem">
<figcaption class="figcaption"><p class="p">Ramo Automovel</p></figcaption>
</figure>
</a>
</li>
<li class="li">
<a href="#">
<figure class="figure">
<img class="img" src="CSS/Imagens/parede/parede32.jpg" alt="Imagem">
<figcaption class="figcaption"><p class="p">Construcao Civil</p></figcaption>
</figure>
</a>
</li>
</ul>
</nav>

Resumindo, eu pretendo que as 4 imagens(lado a lado) mudem de tamanho consoante o tamanho da janela. Quando reduzo o tamanho da janela, as imagens mudam de posição ficando uma em cima da outra(não se sobrepõem). O único problema é que a largura/altura não sofre qualquer tipo de alteração. Tenho pouca experiencia com html e css e aprecio a vossa ajuda.

Desde já muito obrigado.

[fteixeira1993]

Viva,

Dá um olho nisto.

cumps,

fteixeira1993

[Miguel Alves Neto]

Ou então no hover coloca tb o tamanho que pretendes, para forçar o tamanho.

[pexoia]

Convinha colocares aqui tambem o teu CSS, senão é um bocado á toa, tentar resolver o teu problema xD

Apesar de o saber fazer, mas se tens um CSS já feito, era melhor colocares o mesmo aqui para tentarmos resolver u_u

Ou então coloca aqui http://jsfiddle.net/

Cumprimentos