.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 图像。当我将鼠标悬停在图像上时,会出现覆盖背景图像的颜色。我想删除那个额外的叠加背景图像颜色。它仅显示准确的图像。当我悬停图像时。它仅覆盖背景图像。
最佳答案
在.dest-topic
中设置left:30px
,因为在.uk-grid>*
类中给出了left 30px padding
.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>
关于html - 使用uikit的图像叠加悬停效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54088415/