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

【问题标题】：How to create expanding div width on hover如何在悬停时创建扩展 div 宽度
【发布时间】：2016-06-07 16:45:09
【问题描述】：

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

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

我将如何实现这一目标？

【问题讨论】：

标签： jquery css animation html

【解决方案1】：

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

我制作了一个新的小提琴，将它包裹在两个 DIV 中。您应该做什么，在“外部 div”上，将您想要的图像作为背景。然后在内部 div 上，内容 div。

这是小提琴。 Hover Div Image Box JSFiddle 享受和快乐编码。

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

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>

【讨论】：

【解决方案2】：

尝试像这样FIDDLE

CSS

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

HTML

 <div></div>

【讨论】：