Arquivo: fotos.css

@charset "UTF-8";

ul#album-fotos {
    width: 700px;
    margin: 0 auto;
    padding: 50px;
    overflow: hidden;
    list-style: none;
}

ul#album-fotos li {
    float: left;
    width: 200px;
    height: 200px;
    margin: 10px;
    border: 5px solid #ffffff;
    background-color: #ffffff;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .4);
    transition: all .4s ease-in;
}

ul#album-fotos li span {
    opacity: 0;
    color: #ffffff;
    text-shadow: 1px 1px 1px #000000;
    background-color: rgba(0, 0, 0, .3);
    font-size: 9pt;
    line-height: 370px;
    padding: 5px;
}

ul#album-fotos li:hover {
    transform: scale(1.5);
}

ul#album-fotos li:hover span {
    opacity: 1;
}

ul#album-fotos li#foto01 {
    background: url('../_imagens/galeria-01.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto01:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li#foto02 {
    background: url('../_imagens/galeria-02.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto02:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li#foto03 {
    background: url('../_imagens/galeria-03.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto03:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li#foto04 {
    background: url('../_imagens/galeria-04.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto04:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li#foto05 {
    background: url('../_imagens/galeria-05.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto05:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

ul#album-fotos li#foto06 {
    background: url('../_imagens/galeria-06.jpg');
    background-position: 50% 50%;
    background-size: 400px 400px;
    background-color: #ffffff;
}
ul#album-fotos li#foto06:hover {
    background-position: 0px 0px;
    background-size: 200px 200px;
}

line-height: ; : se você tiver um parágrafo de texto e quiser aumentar o espaçamento entre as linhas de texto, você pode usar a propriedade line-height

transition: all .4s ease-in; : Quando você usa all na propriedade de transição, qualquer alteração que ocorra nas propriedades animáveis do elemento será animada de acordo com as regras definidas na propriedade de transição. Isso inclui coisas como color, background-color, height, width, e muitas outras.

transform: scale(1.5); : no CSS é usada para alterar o tamanho de um elemento. Quando você usa scale(1.5), está aumentando o tamanho do elemento em 50%. Isso significa que o elemento será 1.5 vezes maior do que o tamanho original.