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:
Código :
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.
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:
Código :
<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>
<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.