Appearance of footer when it is above the image (arrow)

Navigation
0

I tried to make the footer appear when the click is on top of the arrow, but blinking occurs and it does not work, can it be done only with css or will js be necessary? 

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>
    
asked by hubman 10.01.2017 в 17:06
source

2 answers

1

Yes, if you can, adding a bit of CSS3 without the need for JavaScript could create a similar effect, it could be done in two ways, one is with hover the one you are trying to use and a good example that you have provided and another more advanced way would be using a input checked , which would be through a button.

  

Note: You could also implement the pseudo-elements :before and / or :after and insert icons of fonts or text and create another effect to our button easily.

Example implementing button with click: 

body {
    height:100%; width:100%;
    margin: 0;
    overflow-x:hidden;
}

.header img {
    width: 100%;
}

/*Invisible checkbox*/
input[type=checkbox] { 
   clip: rect(0, 0, 0, 0);  
   position: absolute; 
}   
/*Posicion flecha*/
label[for=btn-footer] {
    background-color: rgba(0, 0, 0, 0.6);
    position:fixed; 
    bottom:20px; 
    left:20px;
    padding: .3rem;
    z-index:101;
}
/* Mostramos pie de pagina */
#btn-footer:checked ~ .test {
   display:block;
   bottom:0;
   transition: bottom 1s linear;

}
/* Cambiamos estilos para flecha */
#btn-footer:checked + label {
   bottom:60px;
   transform:rotate(-180deg);
    
 }
/* Estilos pie de pagina */
.test {
    background-color: rgba(0, 0, 0, 0.6);
    position: fixed;
    bottom: -100px;/* Invisible */
    height: 100px;
    width: 100%;
    z-index:100;
    overflow:hidden;
    cursor: pointer;
    transition: bottom 1s linear;
}
.test p {      
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  color:white;

  height: 100%;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
/* Transiciones, para efectos a nuestra caja y boton */
.test,label[for=btn-footer],#btn-footer:checked + label[for=btn-footer] {
    transition: bottom 1s linear;
}

   
<div class="header">
    <img src="http://lorempixel.com/920/300/" alt="">
</div>
    


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non eleifend sem. Fusce tristique, lacus eget ultricies sollicitudin, urna justo venenatis neque, in scelerisque turpis ante quis nibh. Nunc pellentesque luctus suscipit. Vivamus eu ex bibendum, malesuada lorem id, rutrum diam. Pellentesque blandit magna tellus, cursus auctor elit pulvinar tristique. Aliquam vulputate vitae risus vitae pulvinar. Curabitur vitae posuere magna. Sed vitae maximus sem, eu fringilla diam.<br />
<br />
Integer volutpat auctor orci, vel faucibus felis ultricies sit amet. Donec eget elit at sem commodo mattis feugiat quis nibh. Aliquam quis turpis nec libero hendrerit molestie. Suspendisse et mauris blandit, posuere ligula vel, aliquam ex. Nam ut blandit mi, eget imperdiet ipsum. Aliquam tincidunt mauris consectetur orci elementum, eu dignissim metus pharetra. Sed a elit viverra, dictum justo ut, rhoncus tellus. Aliquam erat volutpat. Vivamus suscipit volutpat orci id fermentum. Proin vel euismod est, sit amet bibendum magna. Nunc tincidunt tristique magna, eget mattis ante pharetra in.<br />
<br />
Nullam lacinia arcu rutrum congue accumsan. In malesuada accumsan metus in bibendum. Cras auctor nulla metus, non aliquet neque ullamcorper eget. Curabitur sollicitudin sit amet lorem et convallis. Ut nec pharetra sapien. Nulla tristique vulputate magna elementum tristique. Vivamus ut quam ex. Pellentesque id tincidunt turpis. Pellentesque suscipit at ligula ut consequat. Vestibulum eu consectetur est. Proin porta rhoncus elit sed dictum. Cras auctor nisl leo, at egestas lectus auctor vel. Proin faucibus enim sapien. Etiam risus neque, viverra ac vulputate sed, dapibus at orci. Nulla faucibus turpis ac neque elementum cursus. Aliquam in est nisi.<br />
<br />
<!-- boton pie pagina -->
<input type="checkbox" id="btn-footer" />

<label for="btn-footer">
   <img src="http://iconos.gratis.es/iconos/finanzas/euro-bolsa-dolar-graficas/flechas.png" alt="footer" height="10" width="10">
</label>

<!-- Contenido pie pagina -->        
<div class="test">    
   <p>This is my footer</p>
</div>
    
answered by 10.01.2017 / 23:17
source
2

Your example works, the blinking is because when you put the cursor on the image the element p is visible and it "covers" the image thus losing the hover. You can solve this by adding a z-index higher than the image.

  

The z-index property establishes the order of visibility in a stack of elements. By default, the parent will always be under the stack, while the last child will be at the top.

I leave you an example of this and making the absolute image. 

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: auto;
    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;
  line-height: 100px;
  margin: 0;
  text-align: center;
}
.test img {
  background-color: rgba(0, 0, 0, 0.6);
  left: 2px;
  position: absolute;
  bottom: 2px;
  height: 20px;
  width: 20px;
  z-index: 10;
}
.test > img:hover + p {
  display: block;
  height: 100px;
  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>
    
answered by 10.01.2017 в 17:29
background permamente in html FatalErrorException in Book.php line 12: syntax error, unexpected 'public' (T_PUBLIC)