Criar um efeito de revelação de imagem apenas por CSS com bordas transparentes
UMA Apenas imagem CSS revela efeito pode ser resolvido de maneiras diferentes. Na verdade, é muito fácil codificar um design em que o imagem fica fora de (é sobrevoado por) seu fundo sólido -você apenas colocar uma imagem sobre um elemento menor com um fundo sólido.
Você pode obter o mesmo resultado se você usar bordas transparentes, onde você mantém o tamanho do elemento de fundo da mesma como a do primeiro plano e adicionar bordas transparentes, a fim de crie um espaço vazio para o primeiro plano a transbordar para.
tem algumas vantagens em usar o último método. Como são as bordas transparentes que fornecem a área para o primeiro plano transbordar, podemos controlar a direção do estouro entre as bordas esquerda, direita, superior e inferior. Além disso, ter o mesmo tamanho para o primeiro plano e o plano de fundo torna mais fácil mover os dois elementos simultaneamente através da página.
Em suma, vamos ver como criar um efeito de revelação de imagem somente para CSS usando um fundo sólido menor com um imagem em primeiro plano que tem bordas transparentes. Você pode conferir o demonstração final abaixo.
1. Crie o código inicial
HTML-wise, apenas um No CSS, usamos duas variáveis CSS, Nós também adicionamos o Nós adicione um vazio o Adicionamos a imagem ao o No imagem abaixo você pode ver o que temos até agora ( Para adicionar o fundo menor (slide-out) atrás da imagem, vamos usar o outro pseudo-elemento, Nós criamos outra variável CSS, o largura é calculado como o altura é calculado como Com o Um filtro CSS de Aqui está o captura de tela da demonstração rendido até agora (com Nós Adicione o Como nós já adicionou o Abaixo, você pode ver o demonstração final. Se você exibir
--bgc e --obscurecer para o Cor de fundo e a dimensões do .foo recipiente, respectivamente. No exemplo, usei o mesmo valor para a largura e altura para obter uma caixa quadrada, crie variáveis separadas para a altura e a largura, se você quiser um retangular.posição: relativa regra para .foo, de modo que seus pseudo-elementos, que vamos usar para revelando a imagem, pode ser absolutamente posicionado (veja abaixo), e assim empilhados uns sobre os outros. .foo --bgc: # FFCC03; --dim: 300 px; largura: var (- dim); altura: var (- dim); background-color: var (- bgc); posição: relativa;
conteúdo propriedade para ambos os pseudo-elementos, .foo :: antes e .foo :: depois, para obtê-los processados corretamente. .foo :: before, .foo :: depois de content: "; position: absolute; left: 0; top: 0;
.foo elemento, seus dois pseudo-elementos, .foo :: antes, .foo :: depois, e sua :flutuar pseudo-classes arranje um transição propriedade aquilo vai adicione uma transição facilitada para eles por 500 milissegundos (meio segundo). .foo, .foo: hover, .foo :: antes, .foo :: depois, .foo: hover :: antes, .foo: hover :: after transição: transformar facilidade de 500ms;
2. Adicione a imagem
.foo :: antes pseudo-elemento como imagem de fundo, e dimensioná-lo para cobrir todo o pseudo-elemento com o largura e altura propriedades. Nós empilhe-o logo abaixo do .foo elemento usando o z-index: -1 regra. .foo :: before width: 100%; altura: 100%; fundo: url (camel.png) centro / capa; z-index: -1;
Centro palavra chave centra a imagem, enquanto o tampa palavra-chave dimensiona a imagem para cobrir todo o elemento mantendo a sua relação de aspecto. z-index é removido de .foo :: antes para que possa ser visto):
3. Adicione o fundo deslizante
.foo :: depois.--b, para o largura da borda. Nós damos três fronteiras transparentes ao ::depois de pseudo-elemento: superior, direita e inferior. .foo :: after --b: 20px; largura: calc (100% - var (- b)); altura: calc (100% - calc (var (- b) * 2)); border: var (- b) sólido transparente; border-left: nenhum; box-shadow: inserir 0 var (- dim) 0 var (- bgc); filtro: brilho (0,8); z-index: -2;
calc (100% - var - b)) que retorna a largura total de .foo menos a largura total de suas bordas horizontais (apenas borda direita, já que não há borda esquerda).calc (100% - calc (var (- b) * 2)) que retorna a altura total de .foo menos a largura total de suas bordas verticais (bordas superior e inferior).Sombra da caixa propriedade, nós também adicione uma sombra horizontal do tamanho mesmo que .foo (qual é var (- dim)).brilho (.8) escurece a cor de fundo um pouco e, finalmente, o z-index: -2 regra coloca o ::depois de pseudo-elemento por baixo ::antes que contém a imagem.z-index removido de ambos os pseudo-elementos para que possam ser vistos):
4. Adicione a transformação
transformar propriedade para os dois pseudo-elementos, então quando o usuário paira sobre .foo, ambos os pseudo-elementos são movido horizontalmente.transição propriedade para todos os elementos no final do Passo 1, o movimento da imagem e seu fundo são ambos animados. .foo: hover :: antes, .foo: hover :: after transformar: translateX (100%);
Bônus: margem opcional
.foo ao lado de outros elementos em uma página e deseja que esses outros elementos afastar quando a imagem e seu plano de fundo são adicione uma margem direita da mesma largura que a de .foo ao .foo: hover elemento. .foo: hover margin-right: var (- dim);
