Problem in the Hover effect with Less

Question

I’m trying to make an effect of hover to add a background-color in my image but does not work it creates the background-color Behind the picture I needed her to stay in front I’m using less to do this follows my code

LESS:

.hover-box {
        position: relative;
        &:hover {
            .img-thumb {
                .opacity(.3);
                background-color: @blue-dark;
            }
            .middle {
                .opacity(1);
            }
        }
    }
    .img-thumb {
        display: block;
        width: 100%;
        height: auto;
        transition: .5s ease;
        backface-visibility: hidden;
        padding: 5px;
    }
    .middle {
        transition: .5s ease;
        color: @white;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        .opacity(0);

        i{
            font-size: 30px;
        }
    } 

HTML:

<a href="assets/images/portfolio/thumb/media-thumb.jpg" data-rel="lightcase" title="Projeto-01">
                                        <div class="hover-box">
                                            <img src="assets/images/portfolio/media.jpg" class="img-responsive img-thumb" alt="Projeto 1" title="Projeto 1" />
                                            <div class="middle text-center">
                                                <i class="fa fa-search-plus" aria-hidden="true"></i>
                                             </div>
                                        </div>
                                    </a>

Answer 1

Kirito the best option I could find for your case was to create a ::after with the color you want to make the overlay.

When you wear one background-color on the tag <img> you won’t be able to pass the color of this background up the image. The same happens when you use for example a box-shadow inset on the tag <img> Box-shadow will be there, but it’ll be under the image and you won’t see...

This was the solution I arrived at, sometimes it can serve you... I didn’t need to touch the HTML, it’s all just the CSS. OBS: The colors are different because there were no variables and the opacity

.hover-box {
    position: relative;
    transition: .5s ease;
    &:hover {
        &::after {
            content: "";
            position: absolute;
            display: block;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            padding: 5px;
            opacity: 0.5;
            background-color: black; /* COR DO OVERLAY */
        }
        .middle {
            opacity: 1;
        }
    }
}

Here’s a CSS version working (no LESS)

.hover-box {
  position: relative;
  transition: .5s ease;
}
.hover-box:hover::after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5px;
  opacity: 0.5;
  background-color: black; /* COR DO OVERLAY */
}
.hover-box:hover .middle {
  opacity: 1;
}
.img-thumb {
  display: block;
  width: 100%;
  height: auto;
  transition: .5s ease;
  backface-visibility: hidden;
  padding: 5px;
}
      .middle {
        transition: .5s ease;
        color: red;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        -ms-transform: translate(-50%,-50%);
        opacity: 0;
        z-index: 10;
      }
      .middle i {
        font-size: 30px;
      }

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<a href="http://placeskull.com/50/50" data-rel="lightcase" title="Projeto-01">
    <div class="hover-box">
        <img src="http://placecage.com/500/500" class="img-responsive img-thumb" alt="Projeto 1" title="Projeto 1" />
        <div class="middle text-center">
            <i class="fa fa-search-plus" aria-hidden="true"></i>
            </div>
    </div>
</a>

Class where the effect is. .hover-box:hover::after