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

我认为它的工作方式如你所愿，很难确定页面上的其他代码是什么等等。我已经改变了一些维度，使其更容易使用。对此的任何评论都将是非常好的

悬停时，文本显示在侧面

1 个答案: