/* div que irá mostrar a imagem, dentro dela terá a imagem e o conteúdo oculto*/
.caixaImg {
position: relative;
width: 210px;
display: inline-block;
}
/* deixar a imagem do tamanho da div*/
.imagem {
display: block;
width: 100%;
height: 225px;
}
/*conteudo oculto*/
.sobreposicao {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0;
	transition: .5s ease;
	background-color: #FFFFFF;
}
/* exibir o conteudo oculto*/
.caixaImg:hover .sobreposicao {
opacity: 1;
}
/* estilização do texto oculto*/
.texto {
	color: #000;
	font-size: 14px;
	position: absolute;
	top: 50%;
	left: 103px;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
	width: 171px;
	height: 221px;
}
.btn {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    bottom: 10px;
    right: 10px;
    width: 30px;
    height: 30px;
    background-color: #000;
    text-decoration: none;
}
.btn::after {
    content: "↑";
    font-size: 32px;
    font-weight: bold;
    color: aliceblue;
    transition: margin-top 250ms;
}
.btn:hover::after {
    margin-top:-8px;
}