CSS Hover effect over image not working

Question

what I am trying to do is so that when the user hovers over the image a transparent black overlay with an info icon appears over the image.

For some reason I can't seem to find what's wrong with my logic.

I'm using JQuery's toogleClass() to toggle the hide class.

$(document).ready(function(){
    $('.toggle_hide').hover(function(){
        $(this).toggleClass('hide');
    });
});

* {
box-sizing:border-box;
margin:0;
padding:0;
} 

a{text-decoration:none;}

.hide{display:none; transition: 0.5s ease all;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="width:100%; height:auto; display:flex; flex-direction:column; padding:0px 0px; ">
    <span style="width:100%; height:150px; display:flex; justify-content:center; align-items:center; font-family:Ostrich Sans Bold; font-size:65px; font-weight:900; color:rgba(0,0,0,0.9);">NUESTROS BOCATAS</span>
 <div style="width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;">
     <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
 </div>
</div>

Don't use inline CSS/JS - it's bad practice that leads to hard to maintain code — treyBake, Apr 06 '18 at 20:35
Not only that, but it's overwhelming and hard to decipher for people deciding how to spend their time on Stack Overflow. — 75th Trombone, Apr 06 '18 at 20:36
Where is the icon coming into play? I don't see it in your code? Also, the code snippet...it's not functioning correctly, right? I don't see an icon in the code syntax or code snippet example? — AussieJoe, Apr 06 '18 at 20:39
This may help you out check this link [Here](https://stackoverflow.com/questions/18322548/black-transparent-overlay-on-image-hover-with-only-css) — Kartik, Apr 06 '18 at 21:39

score 1 · Answer 1 · answered Apr 06 '18 at 21:03

Inline styles override those coming from included CSS style-sheets and this probably the problem here. You should read a bit about CSS Cascade and how it is computed what style applies to given element.

So e.g. .hide {display: none;} will never have an effect unless you remove inline style display: flex which could be in CSS class, not inline. Another option, which I do not recommend is using !important.

score 0 · Answer 2 · answered Apr 06 '18 at 21:15

just replace the class .hide in your css with :

.hide{opacity:0; transition: 1s ease all;}

and instead of toggleClass() use $(this).css({'opacity' : 1}); for better transition

$(document).ready(function(){
    $('.toggle_hide').hover(function(){
        $(this).css({'opacity' : 1});
    }, function(){
       $(this).css({'opacity' : 0});
    });
});

* {
box-sizing:border-box;
margin:0;
padding:0;
} 

a{text-decoration:none;}

.hide{opacity:0; transition: 0.5s ease all;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="width:100%; height:auto; display:flex; flex-direction:column; padding:0px 0px; ">
    <span style="width:100%; height:150px; display:flex; justify-content:center; align-items:center; font-family:Ostrich Sans Bold; font-size:65px; font-weight:900; color:rgba(0,0,0,0.9);">NUESTROS BOCATAS</span>
 <div id="content" style="width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;">
     <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style=" width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
  <div style="width:46%; height:500px; display:flex; flex-direction:column; margin:25px 0px;">
      <div style="width:100%; height:70%; position:relative; box-shadow:4px 4px 4px rgba(0,0,0,0.2); background-size:cover; background-position:center; background-image:url('https://tallypress.com/wp-content/uploads/2017/08/top-10-western-food-catering-services-in-kl-and-selangor.jpg');">
       <div class="toggle_hide hide" style="display:flex; width:100%; height:100%; position:absolute; top:0px; left:0px; z-index:999; background-color:rgba(0,0,0,0.6);">   
        <i class="fa fa-info" style="margin:auto; font-size:25px; color:rgba(255,255,255,0,7);"></i>
    </div>
   </div>
   <div style="width:100%; height:30%; padding:10px; display:flex; flex-direction:column; ">
       <a href="" style="text-align:center; font-family:Ostrich Sans Heavy Bold; font-size:22px; color:black; font-weight:600; margin-bottom:15px;">Titulo</a>
    <a href="" style="font-family:Aleo; font-size:19px; color:rgba(0,0,0,0.8); font-weight:600;">Grade A Nebraska chuck beef, on a sponge bun with lettuce, onion, tomato, and thousand island.</a>
   </div>
  </div>
 </div>
</div>

CSS Hover effect over image not working

2 Answers2