使用uikit进行图像叠加悬停效果

Question

.destination {
  position: relative; 
}
.dest-topic{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.destination:hover .dest-topic {
  visibility: visible;
  padding:0px !important;
}
.dest-title {
  color: white;
  font-size: 18px;
  transition: .1s;
  transform: translateY(1em);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>

<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
    <div class="uk-first-column">
        <div class="uk-child-width-expand@s uk-padding-xsmall uk-text-center " uk-grid="">
            <div class="uk-first-column uk-panel uk-padding-xsmall destination">
                <a href="/destination"><img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image"></a>
                <div class="dest-topic">
                    <a href="/destination"><div class="dest-title">Annapurna Base Camp</div></a>
                </div>
            </div>

        </div>
    </div>

    <div>
        <div class="uk-child-width-expand@s uk-text-center " uk-grid="">
            <div class="uk-panel uk-padding-xsmall destination">
                <a href="/destination"><img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image"></a>
                <div class="dest-topic">
                    <a href="/destination"><div class="dest-title">Everest Base Camp</div></a>
                </div>
            </div>
        </div>
    </div>
</div>

此代码是在uikit框架中编写的。 uikit有两个图像。当我将鼠标悬停在图像上时，叠加的背景图像颜色就会出来。我想删除多余的叠加背景图像颜色。它仅显示准确的图像。当我将图像悬停时它仅覆盖背景图像。

Answer 1

在left:30px中设置.dest-topic，因为在.uk-grid>*类中提供了30px的填充

.destination {
  position: relative; 
}

.dest-topic {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 30px;
  right: 0;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.destination:hover .dest-topic {
  visibility: visible;
  padding:0px !important;
}

.dest-title {
  color: white;
  font-size: 18px;
  transition: .1s;
  transform: translateY(1em);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/js/uikit.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.0.0-rc.26/css/uikit.min.css" rel="stylesheet"/>

<div class=" uk-child-width-1-2 uk-padding-xsmall uk-child-height-1-2 " uk-grid="">
    <div class="uk-first-column">
        <div class="uk-child-width-expand@s uk-padding-xsmall uk-text-center " uk-grid="">
            <div class="uk-first-column uk-panel uk-padding-xsmall destination">
                <a href="/destination"><img src="https://source.unsplash.com/1200x500/?heli"alt="" class="dest-image"></a>
                <div class="dest-topic">
                    <a href="/destination"><div class="dest-title">Annapurna Base Camp</div></a>
                </div>
            </div>

        </div>
    </div>

    <div>
        <div class="uk-child-width-expand@s uk-text-center " uk-grid="">
            <div class="uk-panel uk-padding-xsmall destination">
                <a href="/destination"><img src="https://source.unsplash.com/1200x500/?annapurna" alt="" class="dest-image"></a>
                <div class="dest-topic">
                    <a href="/destination"><div class="dest-title">Everest Base Camp</div></a>
                </div>
            </div>
        </div>
    </div>
</div>