Question

:hover上文字的垂直对齐方式无效。悬停后，整个帖子区域应覆盖指针光标，应该是可点击的，但不是。

HTML

<div class="photoset post-background">
    <div class="imgoverlay text-light">
        <a href="{Permalink}">
            <div class="photos">
            {block:Photos}
                <img alt="" src="{PhotoURL-500}">
            {/block:Photos}     
            </div>
            <div class="overlay">
                <span class="overlaycolor"></span>
                <div class="overlayinfo">
                {block:ContentSource}
                    <a href="{Permalink}"><h6>{SourceTitle}</h6></a>
                {block:ContentSource}
                </div>
            </div>
        </a>
    </div>    
</div>

CSS

.imgoverlay {
    position: relative;
    overflow: hidden;
    display: block;
    max-width: 100%;
}

.imgoverlay img {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

.imgoverlay .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(Opacity=0)";
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.imgoverlay:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(Opacity=100)";
}

.imgoverlay .overlaycolor {
    width: 100%;
    height: 100%;
    background: {color:Post Hover};
};

示例 http://www.jnck.sk/

感谢您的帮助！

Answer 1

使用带display:block的span而不是链接内的div。像div这样的块元素不应该是内联块。

对于文本的垂直对齐，您可以使用，即：

.overlayinfo {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

如何垂直对齐文本：悬停

1 个答案: