Efeitos :: UpBack Description
© Unfe3ling Tutorials - Códigos e Desenvolvimento. Se lhe for útil dê like, se usar credite.
CSS:
Cole o código abaixo antes de </style>:
figure {position: relative; width: 250px; height: 300px; overflow: hidden; margin-left: 0px; margin-top: 0px; border: 3px #C1BED1 solid;} figure img { width: 250px; height: 300px; } figure img:hover{ width: 250px; height: 300px; } figure figcaption { text-align:center; width: 100%; color: #fff; font-family: arial; padding: 7px; margin-left: 0; position: absolute; -webkit-transition: .7s all linear; -moz-transition: .7s all linear; -ms-transition: .7s all linear; -o-transition: .7s all linear; transition: .7s all linear; pointer-events: none;} figure:hover figcaption, figure:focus figcaption { margin-top: -230px; }
Entenda:
.figure: determina as configurações da caixa onde estará a imagem;
width: largura da caixa;
height: altura da caixa;
margin-left e margin-top: posiciona a caixa;
border: mude #c1bed1 para a cor que desejar a borda.
figure img: altura e largura da imagem que fica na caixa.
figure img:hover: altura e largura da imagem no hover (mantenha do tamanho que você usar no figure img)
figure figcaption: configurações do texto mude o #fff para a cor que deseja que o texto seja;
figure:hover figcaption: a altura do texto, mude quanto maior o valor mais em cima ele irá parar.
HTML:
Cole o código abaixo onde deseja o efeito:
<figure id="hong-kong"> <img src="https://64.media.tumblr.com/0dbe764cd2a3e9151869b76651388c92/tumblr_mlj0vlTBSY1rg49sro1_500.jpg" width="250px" height="300px"> <figcaption>SUA DESCRIÇÃO AQUI</figcaption> </figure></div>