Arquivo: fotos.html

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tudo sobre o Google Glass</title>
    <link rel="stylesheet" href="_css/estilo.css">
    <link rel="stylesheet" href="_css/fotos.css">
</head>
<script src="_javascript/funcoes.js"></script>
<body>
    <div id="interface">
        
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
            </hgroup>
    
            <img id="icone" src="/curso-html5-pacote01/projeto-glass-html5/
            _imagens/fotos.png" alt="oculos preto do google glass">
            <nav id="menu">
                <h1>Menu Principal</h1>
                <ul type="disc">   
                    <li onmouseover="mudaFoto('_imagens/home.png')" 
                    onmouseout="mudaFoto('_imagens/fotos.png')">
                        <a href="index.html">Home</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/especificacoes.png')" 
                    onmouseout="mudaFoto('_imagens/fotos.png')">
                        <a href="specs.html">Especificações</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/fotos.png')" 
                    onmouseout="mudaFoto('_imagens/fotos.png')">
                        <a href="fotos.html">Fotos</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/multimidia.png')" 
                    onmouseout="mudaFoto('_imagens/fotos.png')">
                        <a href="multimidia.html">Multimídia</a>
                    </li>
                    <li onmouseover="mudaFoto('_imagens/contato.png')" 
                    onmouseout="mudaFoto('_imagens/fotos.png')">
                        <a href="fale-conosco.html">Fale conosco</a>
                    </li>
                </ul>
            </nav>
        </header>

        <section id="corpo-full">
            <article id="noticia-principal">
                <header id="cabecalho-artigo">
                    <hgroup>
                        <h3>Glass > Fotos</h3>
                        <h1>Galeria de Imagens do Google Glass</h1>
                        <h2>por Gustavo Guanabara</h2>
                        <h3 class="direita">Atualizado em 01/Maio/2013</h3>
                    </hgroup>
                </header>

                <p>Veja na nossa galeria de fotos várias belas imagens que mostram 
                algumas das principais características do Google Glass, como recursos 
                e propriedades que estão impressionando o mundo inteiro. Basta passar 
                o mouse sobre uma das fotos para ver uma versão ampliada e com uma breve 
                descrição.</p>
                
                <ul id="album-fotos">
                    <li id="foto01"><span>Agenda e lembretes</span></li>
                    <li id="foto02"><span>Sergey Brin usando o Glass</span></li>
                    <li id="foto03"><span>Leve e compacto</span></li>
                    <li id="foto04"><span>Sensação de uma tela de 50"</span></li>
                    <li id="foto05"><span>Vários tipos de lente</span></li>
                    <li id="foto06"><span>Informações importantes</span></li>
                </ul>
            </article>
        </section>

            <footer id="rodape">
                <p>Copyright &copy; 2013 - by Gustavo Guanabara <br> 
                <a href="<https://facebook.com/cursosemvideo>" target="_blank">
                Facebook</a> | <a href="<https://twitter.com/cursosemvideo>" 
                target="_blank">Twitter</a></p>
            </footer>
        </div>
    </body>
</html>

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);
}

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

ul#album-fotos li#foto01 {
    background: url('../_imagens/galeria-01.jpg');
}

ul#album-fotos li#foto02 {
    background: url('../_imagens/galeria-02.jpg');
}

ul#album-fotos li#foto03 {
    background: url('../_imagens/galeria-03.jpg');
}

ul#album-fotos li#foto04 {
    background: url('../_imagens/galeria-04.jpg');
}

ul#album-fotos li#foto05 {
    background: url('../_imagens/galeria-05.jpg');
}

ul#album-fotos li#foto06 {
    background: url('../_imagens/galeria-06.jpg');
}

`overflow: hidden;` : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área.

Especificamente, overflow: hidden; faz o seguinte:

Esconde o conteúdo extra: Todo o conteúdo que excede o tamanho da caixa será cortado e não será visível para o usuário.
Remove a barra de rolagem: Não importa o quanto o conteúdo seja grande, a barra de rolagem não será mostrada.

`opacity: 0;` : é usada para alterar a opacidade de um elemento. A opacidade é a medida de quão transparente um elemento é. O valor da opacidade pode variar de 0 a 1, onde:

0 significa que o elemento é completamente transparente.
1 significa que o elemento é completamente opaco (sem transparência).

Arquivo: fotos.html

Arquivo: fotos.css

overflow: hidden; : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área.

opacity: 0; : é usada para alterar a opacidade de um elemento. A opacidade é a medida de quão transparente um elemento é. O valor da opacidade pode variar de 0 a 1, onde:

`overflow: hidden;` : é usada para controlar o que acontece com o conteúdo que é muito grande para caber em uma área.

`opacity: 0;` : é usada para alterar a opacidade de um elemento. A opacidade é a medida de quão transparente um elemento é. O valor da opacidade pode variar de 0 a 1, onde: