Javascript 使用创建长方体的较大副本

我创建了一个包含图像、标题、链接和少量数据的框，如下所示：

我想创建div-box的复制品，它应该比实际尺寸大一点。事实上，我想在悬停时用稍大的尺寸突出显示它

我在fiddle with item2类中通过增加高度创建了第二个副本，但没有效果

有人能告诉我怎么做吗

我在谷歌搜索时发现了这个

$('#theDiv').clone().css('-webkit-transform', 'scale(.125, .125)');

及

---

但是我想不出来。你在复制ID。ID在HTML中必须是唯一的，JavaScript将只搜索找到的第一个ID，不再搜索：

var w = $("#thediv").width();
var clone = $('#thediv').clone().attr('id', 'newId').css("width", w/8);

---

您可以使用CSS悬停来删除此项

小提琴：

---

JSFIDLE中没有ID为theDiv的元素；也没有任何JavaScript。在查看您的小提琴后，我注意到您正在为item2应用高度60px，但不适用于描述、标题和图像，因此item2框的高度为60px，但不适用于其子项。您需要调整图像、描述、，标题元素also@Ashish：通过改变父div的sizeThanks，是否有其他方法使所有其他元素的大小也发生相对变化，请您给fiddle

var w = $("#thediv").width();
var clone = $('#thediv').clone().attr('id', 'newId').css("width", w/8);

.item:hover h6 {
    margin-top: 20px;
    font-size: 14px;
}

.item:hover .moreBtn img {
    margin-top: 4px;
}

.item:hover .moreBtn {
    position: relative;
    font-size: 16px;
    margin-right: 10px;
    margin-top: 40px;
    color: red;
    text-shadow: 0px 1px 0px;
    font-family: Helvetica;
    font-weight:bold;
    text-style:italic;
    }
.item:hover .pillBtn {
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    background:#7CDD97;
    padding: 21px 70px 21.0px 70px;
    color: #FFF;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
}
.item:hover {
    background:#F3F3F3;
    height: 70px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}
.item:hover .media-object {
    height: 70px;
    width: 140px;
}