Background color change on hover not working along with CSS animation

Question

I had been trying to achieve the effect on this page (it does not seem to work on some touchscreens!) where the text goes up and the background goes dark on hover, but I can't make the background change when I added the CSS animation, If I remove it then background color effect works well.

Also I would like to have this effect on 100% height of the background picture, as in the original page.

Is there a way I can make it work?

#tech-specs-container-desk {
 display: inline-block; 
 position: relative;
 z-index : 1;
 width: 100%;
 height: 581px; 
 background-image: url('https://i.stack.imgur.com/mQF3B.jpg');
 background-size: 100vw 100%;  
 }
 .specs:hover{
 font-size: 25pt;
 line-height: 30pt;
 position: relative;   
 background: rgba(0, 0, 0, 0.2)   
  -webkit-animation: moving-spec 3s forwards;
 animation: moving-spec 3s forwards;   
 }
 @-webkit-keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
}

@keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
} 
 .specs{
 width: 18%;
 display: inline-block;   
 font-family:'Futura Std Light';
 font-size: 15pt;
 line-height: 20pt; 
 color: #666666;
 text-align: center; 
 padding: 10px 20px; 
 border-right: 0.5px solid #666666;
 vertical-align: text-top;   
 }
 #inner-specs-container-desk {
 display: inline-block;
 position: relative;    
 width: 100%;
 top:270px;   
 }

<div id="tech-specs-container-desk">
    <div id="inner-specs-container-desk">
      <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div>
      <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div>
      <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div>
      <div id="spec-four" class="specs">Protocolos de seguridad de la información </div>
    </div>
  </div>

Background img

Possible duplicate of [Black transparent overlay on image hover with only CSS?](https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) — achref, Nov 21 '17 at 18:50
I had seen this before, but how do I implement it in only a portion of the background picture, according to the text hovered and while maintaining the text animation. — NullEins, Nov 21 '17 at 18:59

score 0 · Answer 1 · answered Nov 21 '17 at 18:55

I changed the css, used background before the animation+background, so it was defined properly. The background+animation is invalid in my browser.

edit: Below answer is correct. Didnt even see the missing symbol.

#tech-specs-container-desk {
 display: inline-block; 
 position: relative;
 z-index : 1;
 width: 100%;
 height: 581px; 
 background-image: url('https://i.stack.imgur.com/mQF3B.jpg');
 background-size: 100vw 100%;  
 }
 .specs:hover{
 font-size: 25pt;
 line-height: 30pt;
 position: relative;
 background: rgba(0, 0, 0, 0.2);   
 background: rgba(0, 0, 0, 0.2)   
  -webkit-animation: moving-spec 3s forwards;
 animation: moving-spec 3s forwards;
 z-index: 9999;   
 }
 @-webkit-keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
}

@keyframes moving-spec {
    from {bottom: 0px;}
    to {bottom: 100px;}
} 
 .specs{
 width: 18%;
 display: inline-block;   
 font-family:'Futura Std Light';
 font-size: 15pt;
 line-height: 20pt; 
 color: #666666;
 text-align: center; 
 padding: 10px 20px; 
 border-right: 0.5px solid #666666;
 vertical-align: text-top;   
 }
 #inner-specs-container-desk {
 display: inline-block;
 position: relative;    
 width: 100%;
 top:270px;   
 }

<div id="tech-specs-container-desk">
    <div id="inner-specs-container-desk">
      <div id="spec-one" class="specs"> Integración con sistemas de salud bajo protocolo HL7 </div>
      <div id="spec-two" class="specs"> Funcionamiento en tiempo real</div>
      <div id="spec-three" class="specs">Almacenamiento en CLOUD y escalable </div>
      <div id="spec-four" class="specs">Protocolos de seguridad de la información </div>
    </div>
  </div>

score 0 · Answer 2 · answered Nov 21 '17 at 18:57

0

You are just missing a ; at the end of background: rgba(0, 0, 0, 0.2)

answered Nov 21 '17 at 18:57

achref

1,150
1
12
28

Sorry I miss that, now how can I achieve the effect to 100% of the picture height? – NullEins Nov 21 '17 at 19:05

Background color change on hover not working along with CSS animation

2 Answers2