#upbackdesc

© 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: