Agência Web BH

Web Kit Spotlight

O Web Kit Spotlight cria uma película sobre suas fotos, que se move ao passar do mouse. Esta camada pode ser um html ou imagem. A imagem de lupa, padrão, é ideal para o aumento de suas fotos através do recurso lightbox.

Características

  • Crie imagens de sobreposição facilmente
  • Suporta sobreposição com imagens ou HTML
  • 5 tipos de animação diferentes
  • Design responsivo que se adapta a todas as resoluções de dispositivos móveis
  • Construído com a última versão do jQuery

Exemplos

Caso você não configure sua spotlight, será carregado automaticamente a imagem de lupa. Se você definir uma sobreposição customizada, poderá escolher através das diferentes animações - fade, bottom, top, right e left.

Como usar

Use o atributo de customização do HTML5 data-spotlight para ativar o Agência Web BH spotlight.

<a data-spotlight="on" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
</a>

Para criar uma sobreposição customizada, use o elemento DIV da classe CSS overlay. Você pode ajustar o parâmetro efeito para o atributo data. Como no exemplo:

<a data-spotlight="effect:bottom;" href="/mypage.html">
  <img src="/image.jpg" width="180" height="120" alt="" />
  <div class="overlay">Custom Overlay</div>
</a>

Você pode ajustar o parâmetro efeito para Aparecer, abaixo, no topo, direita e esquerda.

Desenvolvido em HTML5 e CSS3 - Copyright © 2015 Pró Virtual - Agência Web BH
Av. do Contorno 6.413 - 2º andar - Savassi - Belo Horizonte - MG