Tomando o controle de Rollovers Imagem

Na maioria dos navegadores, há um limite padrão que envolve as imagens que são usadas como links. Geralmente é um grande, desagradável, borda grossa azul brilhante. Este é provavelmente indesejável, por isso, neste artigo nós estaremos olhando maneiras que você pode cuidar dela no CSS ...

Para remover a borda padrão usar isso no seu CSS:


a img { border: none; }


Você também pode remover o limite padrão de imagens ligadas ao incluir "border = 0" dentro da tag de imagem, mas esta é uma propriedade obsoleta e não é recomendado. Infelizmente, ele está incluído na cópia de muitas amostras e cole o código, uma vez que forças o resultado desejado, sem ter que contar com o proprietário do site mantendo CSS bom.

Esse padrão borda azul não é mau, é apenas a tentar ser útil e que você saiba a imagem é envolvente é um hiperlink. Vamos assumir essa responsabilidade para nós mesmos e ver se podemos chegar a algumas sobreposições de imagens são um pouco mais agradável e mais interessante.

A melhor maneira de ver estes exemplos está a visualizar a página exemplo ea melhor maneira de entender como eles trabalham é para baixar o exemplo e olhar o código você mesmo.

Exemplo 1: borda grossa

Este exemplo dá a imagem de poucos pixels de padding e border no seu estado normal e adiciona uma cor de fundo em capotamento.

Exemplo 2: Thick Dashed Border

Esta é uma técnica semelhante a rolagem apenas adiciona uma borda grossa tracejada à imagem. O truque aqui é que a fronteira existe em seu estado normal também, só que é branco como a cor de fundo. Se essa fronteira não estava em seu estado normal, e foi adicionado durante a rolagem, a imagem iria mudar de posição para dar espaço para a fronteira, o que seria um resultado dissonante e indesejável.

Exemplo 3: Black & White para cor

Esta técnica faz com que a imagem de "colorir" no capotamento. Isto é um pouco mais complicada, em que você não será capaz de uso regular tags IMG no HTML. Você vai utilizar os elementos âncora com nomes de classe única. Estas escoras terão alturas e larguras específicas e uma imagem de fundo. Então, em capotamento, você pode trocar a imagem de fundo para uma versão de cor.

Exemplo 4: Adicionar Gradient Background

Em vez de adicionar uma cor sólida, como no exemplo 1, você pode usar uma imagem. Basta dar a imagem de algum estofamento em ambos os lados para que haja algum espaço para o gráfico a aparecer.

Exemplo 5: Display de Informações

Esta técnica torna o texto aparecer abaixo da imagem em capotamento. Faz uso da propriedade background-image no CSS como no exemplo 3, mas neste caso, a imagem de fundo permanece o mesmo. A diferença é que, em estado regular, o texto é chutada para fora da tela com um enorme deslocamento negativo que é removido em capotamento. Para obter o texto a aparecer abaixo da imagem em vez de em cima dele dar a âncora de um padding-top de um pouco maior do que a altura da imagem.