使文本在悬停时显示在侧面

Question

我是第一次使用这个论坛，所以如果我缺少一些关键元素，请告诉我。

我

的目标：我正在尝试创建 4 个可点击的图像（在框布局中），其中当鼠标越过时，我想要一个轻微的动画来显示图像上的图标，同时我想要一个描述性文本将出现在图像的一侧。

我

的情况：我有我想要的维度设置的图像，以及小动画。

我的问题：我已经尝试了很多很多事情，但是当鼠标悬停在图像上时，无法使文本出现在图像的侧面。这是 Html：

<div class="video-container">

<a href="" class="thumb-unit" style="background-image: url(/assets/img/video/thumb1.jpg)">
<div class="thumb-overlay">
    <strong>PLAY</strong>
</a> </div>

（以上结构4次）这是 css：

.videos
background: #e1f3f6
h3
    margin: 0
    text-align: center 
    font-family: "Quicksand", sans-serif 
    letter-spacing: 1em 
    color: #deb75c  
    padding-top: 70px 
    font-weight: 300

.video-container
max-width: 930px 
margin: 0px auto
padding-top: 88px 
padding-bottom: 70px

+clearfix
.thumb-unit


    overflow: hidden
    display: block
    width: 50%
    position: relative 
    padding-top: 20%
    background: pink
    float: left
    background: 
        position: center center 
        repeat: no-repeat 
        size: cover



    .thumb-overlay

        +position(absolute, 100% 0px null 0px)
        height: 100%
        background: fade-out(#6693b0, 0.3)
        +transition
        text-align: center
        strong 
            padding: 30px 
            display: block
            Color: white 
            font-weight: 400
            text-transform: uppercase
            font-size: 17px
        background:
            image: url(/assets/img/icon/play.png)
            position: center 70px
            repeat: no-repeat
        h4
            border: 2px solid red
            position: absolute!important
            width: 300px!important
            right: 300px!important
            visibility: visible!important!important


    &:hover .thumb-overlay 
        +position(absolute, 0% 0px null 0px)

如您所见，该代码反映了我当前的情况。如果您有任何见解，非常感谢!!

Answer 1

我稍微调整了您的代码，不确定您的页面上还有什么，但希望这是有意义的，您可以将其添加到您的代码中。

<div class="video-container">
        <a href="#">
            <div style="background-image:url('Thumb.jpg');">
                <strong>PLAY</strong>
            </div>
            <div>
                This is the display text you want to display.
            </div>
        </a>
    </div>

和 CSS

.video-container
{
    width:100px;
    height:100px;
    margin: 5px;
    float:left;
}
    .video-container > a > div:nth-child(1)
    {
        height:100px;
        width:100px;
        float:left;
    }
    .video-container > a > div:nth-child(2)
    {
        display:none;
        height:100px;
        width:100px;
        margin:-100px 0px 0px 100px;
        float:left;
    }
    .video-container > a:hover > div:nth-child(2)
    {
        display:block;
    }

我认为它以您想要的方式工作，很难确定页面上的其他代码是什么等。 我更改了一些尺寸，使其更易于使用。 对此的任何评论都会很棒