Question

您好我想创建此网站上展示的扩展框动画，特别是彩色div在图像上展开并显示更多文字的方式。

http://metcreative.com/demo_viewer/index.php?theme=shocoonwp

我将如何实现这一目标？

Answer 1

他给了你一个正确的回答，但没有给你所有需要的信息。

我在两个DIV中创造了一个新的小提琴。你应该做什么，在'外部div'上，将你想要的图像作为背景。然后在内部div上，内容div。

这是小提琴。 Hover Div Image Box JSFiddle享受＆amp;快乐的编码。

如果您满意，请点击向上箭头。

<强> CSS

#outside {
    width: 500px;
    height: 100px;
    background: url("http://www.nyewall.com/images/2013/09/download-windows-7-hd-wallpapers-full-size-desktoplist.jpg") center center no-repeat;
    border: 2px solid #ccc;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    overflow: hidden;
}

#inside {
    width:100px;
    height:100px;
    padding-left: 10px;
    background:#fff;
    opacity: .75;
    float: right;
    transition:width 2s;
    -webkit-transition:width 2s; /* Safari */
}
#inside:hover {
    width:300px;
}

<强> HTML

<div id="outside">
    <div id="inside">
        Inside Div
    </div>
</div>

Answer 2

尝试使用css3，例如FIDDLE

CSS

    div {
        width:100px;
        height:100px;
        background:red;
        transition:width 2s;
        -webkit-transition:width 2s;
        /* Safari */
    }
    div:hover {
        width:300px;
    }

HTML

 <div></div>

如何在悬停时创建扩展div宽度

2 个答案: