Spotlight

A Apresentação em Spotlight permite que você adicione uma sobreposição para as suas imagens, que se desvanece ou se move em no foco do mouse. A sobreposição pode ser uma imagem ou conteúdo HTML. Os holofotes lupa padrão é uma combinação perfeita para um los lightbox Apresentação.

Características

  • Criar sobreposições de imagem bem animados
  • Suporta imagem personalizada ou sobreposições de conteúdo HTML
  • 5 modos de animação diferentes
  • Projeto Responsive para caber todas as resoluções de dispositivos
  • Construído com a mais recente versão do jQuery

    • Exemplos

    Se não overlay personalizado é definido, o foco padrão desaparece em uma superposição de imagem com uma lente de aumento. Se você definir uma sobreposição de costume, você pode escolher entre diferentes animações - Fade, inferior, superior, direita e esquerda.

    Como Usar

    Use o atributo de dados personalizados dados holofotes HTML5 para ativar o centro das atenções. 

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

    Para criar uma sobreposição de costume, use um elemento div com a sobreposição de classe CSS. Você pode definir o parâmetro de efeito para o atributo de dados. Por 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 definir o parâmetro de efeito a desvanecer-se, inferior, superior, direita e esquerda.