3 efeitos em CSS ao passar o mouse

Na web moderna existem inúmeras técnicas que podem ser usadas para criar interações interessantes, mas a mais simples e mais elegante geralmente é CSS, e, especificamente, as adições que vieram com CSS3.

De volta aos velhos dias, tivemos que contar com JavaScript para este tipo de efeito, mas, graças ao crescente apoio para CSS3 em todos os navegadores, é agora possível a criação de efeitos como estes, sem qualquer scripting em tudo. Há, infelizmente, ainda navegadores (IE9 e abaixo) que não suportam CSS3, assim que você nem precisa um fallback para navegadores antigos ou para tratar o efeito como uma melhoria progressiva.

Hoje, vamos ver como podemos aplicar legal, mas efeitos de foco puro para mostrar e ocultar imagens legendas.

Exemplo 1

O primeiro exemplo é o nosso mais simples: a imagem irá deslizar para a direita e mostrar a legenda.

HTML

Logo abaixo temos o código HTML para este exemplo:

<ul class="demo-1 effect">
    <li>
        <h2>This is a cool title!</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS3

No nosso código CSS, vamos definir o posicionamento relative de nossa classe .demo-1 e, em seguida, configurar a largura e altura. Também vamos esconder os elementos flutuantes. Eu também vou colocar alguns estilos básicos para o meu H2 e para as tags p. Agora, para a nossa classe de efeito vamos definir o posicionamento de absolute e aplicar um margin: -15px na parte superior e inferior. Vamos usar o recurso transition em CSS3 para criar um efeito suaves. Nosso CSS deverá ficar assim:

.demo-1 {
    position:relative;
    width:300px; 
   height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-1 p,.demo-1 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-1 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-1 h2 {
    font-family:'Lato';
    font-size:20px;
    line-height:24px;
    margin:0;
}
.effect img {
    position:absolute;
    margin:-15px 0;
    right:0;
    top:0;
    cursor:pointer;
    -webkit-transition:top .4s ease-in-out,right .4s ease-in-out;
    -moz-transition:top .4s ease-in-out,right .4s ease-in-out;
    -o-transition:top .4s ease-in-out,right .4s ease-in-out;
    transition:top .4s ease-in-out,right .4s ease-in-out
}
.effect img.top:hover {
    top:-230px;
    right:-330px;
    padding-bottom:200px;
    padding-left:300px
}

Exemplo 2

O nosso segundo exemplo irá mostrar a imagem deslizando para baixo. Isto significa que quando você passar o mouse sobre a imagem a legenda será exibido acima dela.

HTML

Para nosso segundo exemplo, usaremos um código HTML semelhante à nosso primeiro exemplo. Mas, desta vez, vamos utilizar a classe .demo-2, e adicionar a classe zero:

<ul class="demo-2 effect">
    <li>
       <h2 class="zero">This is a cool title!</h2>
       <p class="zero">Lorem ipsum dolor sit amet.</p>
    </li>
    <li><img class="top" src="images/image1.jpg" alt=""/></li>
</ul>

CSS

Nosso CSS será quase o mesmo do primeiro exemplo, só que desta vez a imagem irá deslizar para baixo. Também vamos usar o recurso transition do CSS3 para criar este efeito:

.demo-2 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px;
    background-color:rgba(26,76,110,0.5)
}
.demo-2 p,.demo-2 h2 {
    color:#fff;
    padding:10px;
    left:-20px;
    top:20px;
    position:relative
}
.demo-2 p {
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0
}
.demo-2 h2 {
    font-size:20px;
    line-height:24px;
    margin:0;
    font-family:'Lato'
}
.effect img {
    position:absolute;
    left:0;
    bottom:0;
    cursor:pointer;
    margin:-12px 0;
    -webkit-transition:bottom .3s ease-in-out;
    -moz-transition:bottom .3s ease-in-out;
    -o-transition:bottom .3s ease-in-out;
    transition:bottom .3s ease-in-out
}
.effect img.top:hover {
    bottom:-96px;
    padding-top:100px
}
h2.zero,p.zero {
    margin:0;
    padding:0
}

Exemplo 3

Para nosso último exemplo, vamos criar o efeito flipping card. Isto significa que quando você passar o mouse sobre a imagem, ela irá girar em torno de seu eixo para revelar a descrição.

HTML

Para o último exemplo HTML, vamos usar uma estrutura diferente. Primeiro, vamos usar o elemento figure juntamente com a tag figcaption dentro dela. Também vamos usar a classe de demo-3 para a nossa lista não ordenada:

<ul class="demo-3">
    <li>
        <figure>
            <img src="images/image1.jpg" alt=""/>
            <figcaption>
                <h2>This is a cool title!</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nost.</p>
            </figcaption>
        </figure>
    </li>
</ul>

CSS

Em nosso CSS, vamos definir a imagem da figura para a posição relative e, em seguida, esconder o backface-visibility. Também vamos usar o rotateY e aplicar: -180 graus para figcaption e depois alterá-lo para 180 graus para o foco tanto da imagem quanto da legenda:

.demo-3 {
    position:relative;
    width:300px;
    height:200px;
    overflow:hidden;
    float:left;
    margin-right:20px
}
.demo-3 figure {
    margin:0;
    padding:0;
    position:relative;
    cursor:pointer;
    margin-left:-50px
}
.demo-3 figure img {
    display:block;
    position:relative;
    z-index:10;
    margin:-15px 0
}
.demo-3 figure figcaption {
    display:block;
    position:absolute;
    z-index:5;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}
.demo-3 figure h2 {
    font-family:'Lato';
    color:#fff;
    font-size:20px;
    text-align:left
}
.demo-3 figure p {
    display:block;
    font-family:'Lato';
    font-size:12px;
    line-height:18px;
    margin:0;
    color:#fff;
    text-align:left
}
.demo-3 figure figcaption {
    top:0;
    left:0;
    width:100%;
    height:100%;
    padding:29px 44px;
    background-color:rgba(26,76,110,0.5);
    text-align:center;
    backface-visibility:hidden;
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure img {
    backface-visibility:hidden;
    -webkit-transition:all .5s;
    -moz-transition:all .5s;
    transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
    transform:rotateY(0)
}

Todos esses recursos, adicionamos em nosso construtor de site, como ele você poderá criar sitecom todos esses recursos sem precisar de conhecimentos em HTML ou CSS3. Crie seu site conosco ou seja nosso parceiro e venda seus sites construídos em nossa plataforma.

Codigos HTML 12:50:00