Problem in hover effect with less

Question

Problem in hover effect with less

Navigation

#1 by (1 votes)

1

I'm trying to make an effect of hover to add a background-color to my image but it does not work it creates background-color behind the image I needed it to stay in front I'm using less to do this follow 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>

html less hover

asked by anonymous 29.01.2018 / 15:49

1 answer

Ajax returning undefined Restore of only one table - Postgresql

score 1 · Accepted Answer

Kirby the best option I found for your case was to create a ::after with the color you want to overlay .

When you use a background-color tag in the <img> tag you will not be able to pass the color of this background to the top of the image. The same happens when you use for example a box-shadow inset in the tag <img> Box-shadow will be there, but it will be under the image and you will not see ...

That was the solution I got, sometimes it can take care of you ... I did not have to tinker with HTML, it's all just in CSS. OBS: The colors are different because they did not have the variables and 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 lot of CSS 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