Dinky UI CSS

# Uso

Nesta seção apresentaremos as classes que podem ser usadas quando você estiver trabalhando com imagem.

Thumbnail

Thumbnail é uma imagem pequena que representa uma maior (quando clicado a imagem com o tamanho original é exibida).


<a href="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg" target="_blank">
  <img class="thumbnail" src="https://cdn.pixabay.com/photo/2017/02/01/22/02/mountain-landscape-2031539_960_720.jpg">
</a>

Imagem avatar

Agora iremos apresentar uma classe para criar avatar com uma imagem.


<img class="avatar" src="https://cdn.pixabay.com/photo/2016/11/29/09/32/concept-1868728_960_720.jpg">

Imagem arredondada

A proxíma classe que será apresentada, faz com que uma imagem (quadrada) fique arredonda.


<img class="circle" width="300" height="300" src="https://cdn.pixabay.com/photo/2015/12/19/20/32/paper-1100254_960_720.jpg">

Efeito overlay

Este tipo de efeito, permite que seja inserido texto que será exibido como um cartão quando o mouse passa sobre a imagem. Por padrão o efeito overlay sempre ocorre de baixo para cima (classe bottom ) que pode ser omitida, mas, podem ser adicionada classes que altera este comportamentp:

Default (ou classe bottom )

Hello World

Do topo para baixo (classe top )

Hello World

Da esquerda para direita (classe left )

Hello World

Da direita para esquerda (classe right )

Hello World


<!-- Classe bottom (pode ser omitida) -->
<div class="overlay-container bottom">
  <img src="https://cdn.pixabay.com/photo/2019/03/22/20/58/cat-4074160_960_720.jpg" alt="Avatar" class="overlay-image">
  <div class="overlay-text">
    <div class="text">Hello World</div>
  </div>
</div>
<!-- classe top -->
<div class="overlay-container top">
  <img src="https://cdn.pixabay.com/photo/2019/03/22/20/58/cat-4074160_960_720.jpg" alt="Avatar" class="overlay-image">
  <div class="overlay-text">
    <div class="text">Hello World</div>
  </div>
</div>
<!-- efeito left -->
<div class="overlay-container left">
  <img src="https://cdn.pixabay.com/photo/2019/03/22/20/58/cat-4074160_960_720.jpg" alt="Avatar" class="overlay-image">
  <div class="overlay-text">
    <div class="text">Hello World</div>
  </div>
</div>
<!-- efeito right -->
<div class="overlay-container right">
  <img src="https://cdn.pixabay.com/photo/2019/03/22/20/58/cat-4074160_960_720.jpg" alt="Avatar" class="overlay-image">
  <div class="overlay-text">
    <div class="text">Hello World</div>
  </div>
</div>

Também é possível alterar a cor do cartão que desce junto com o texto, basta adicionar o nome da cor como classe da div que possui a classe overlay-text. Veja um exemplo abaixo:

Hello World


<div class="overlay-container">
  <img src="https://cdn.pixabay.com/photo/2019/03/22/20/58/cat-4074160_960_720.jpg" alt="Avatar" class="overlay-image">
  <div class="overlay-text blue">
    <div class="text">Hello World</div>
  </div>
</div>