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
.