html - 悬停时使文本出现在侧面

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)

如您所见，代码反射(reflect)了我目前的情况。 如有高人指点，万分感谢!!!

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;
    }

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