He intentado hacer que aparezca el footer cuando el click esté encima de la flecha, pero ocurre parpadeo y no funciona, ¿Se puede hacer solo con css o sera necesario js?
body {
margin: 0;
}
.block {
height: 2000px;
}
.header img {
width: 100%;
}
.test {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
z-index: 99999;
bottom: 0;
height: 10px;
width: 100%;
cursor: pointer;
}
.test > p {
background-color: rgba(0, 0, 0, 0.6);
display: none;
font-size: 12px;
font-family: Arial, sans-serif;
font-weight: normal;
height: 100%;
line-height: 100px;
margin: 0;
text-align: center;
}
.test:hover{
background-color: rgba(0, 0, 0, 0.6);
height: 100px;
/*color:#000;*/
margin-top: 25px;
}
.test:hover > p {
display: block;
font-size: 21px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
-o-animation: fadein 2s; /* Opera */
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-moz-keyframes fadein { /* Firefox */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}
@-o-keyframes fadein { /* Opera */
from {
opacity:0;
}
to {
opacity: 1;
}
}
<div class="header">
<img src="http://lorempixel.com/920/300/" alt="">
</div>
<div class="block"></div>
<div class="test">
<img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
<p>This is my footer
</p>
</div>