Salve a tutti.
Ho creato il seguente codice che potete vedere a questo indirizzo: http://www.maremmahost.it/
codice HTML:
.area {float: left; width: 33.33%; height: auto; position: relative;}
.area img {max-width: 100%;}
.overlay {width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); display: none; position: absolute; top: 0; left: 0; text-align: center;}
.overlay a {color: #fff; font-size: 16px; font-weight: bold; text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8); vertical-align: middle;}
.area:hover .overlay {display: inline;}
codice HTML:
<div class="area"><img src="http://www.poderecasetta.it/writable/public/tbl_galleria/grande/d469h6649196875.jpg"><div class="overlay" align="center"><a href="">Colline Metallifere</a></div></div>
Come potete vedere:
1) Il link non è centrato verticalmente nonostante il "vertical-align: middle"; qui cominciano a venirmi dei dubbi riguardo alle mie conoscenze di css perché ero convinto che dando questa proprietà ad un elemento dovesse disporsi a metà del proprio parent.
2) L'overlay nero, nonostante abbia "height: 100%" del proprio parent (.area), che a sua volta ha "height: auto" variabile in base al contenuto (immagine), sfora di qualche pixel e non capisco il motivo. Se per ipotesi dessi all'overlay un "height: 97%" andrebbe esattamente al pari.
Non ho iniziato esattamente ieri a fare web design, eppure sono molto confuso in questo momento. Qualcuno mi sa chiarire le idee?