javascript - 如何缩小html容器中的图像

Question

我在 html 页面正文中的 div 标签旁边有一个 html 表格。我在表格的 td 元素之一中有一张图片。我的要求是当我将鼠标悬停在 td 元素上时缩小图像(就像在大多数电子商务网站中一样)。

我找到了代码并且能够做到。但问题是它限制为 <td><div>仅限容器，不会缩小到其他部分。

这是我的 <td>标签 -

<td colspan="4"><img class ="blog" src="shirt.jpg" alt="Item" border='3' height='390' width='638'/></td>

这是 CSS -

.blog:hover {
    cursor: pointer;
    height:475px;
    width: 350px;
    transform:scale(1.5);
    -ms-transform:scale(1.5); /* IE 9 */
    -moz-transform:scale(1.5); /* Firefox */
    -webkit-transform:scale(1.5); /* Safari and Chrome */
    -o-transform:scale(1.5); /* Opera */
    overflow: auto;
}

截图 here .

Answer 1

我会把这个 fiddle 作为一个想法抛出 - FIDDLE .

我只是不确定您想要的功能。将鼠标悬停在某物上并且可以看到更大的图片的概念是什么？

CSS

.photo img {
    width: 100px;
    height: 100px;
    transition: all 1s;
}
.holder {
    width: 200px;
    height: 200px;
    text-align: center;
    margin: 20px auto;
    position: relative;
}
.fixeddiv {
    width: 200px;
    height: 200px;
    border: 1px solid blue;
    display: none;
    position: absolute;
    top: 10px;
    left: 200px;
    transform:scale(1);
}
.photo:hover  .fixeddiv {
    display: block;
    }
.photo:hover  .fixeddiv img {
    display: block;
    width: 200px;
    height: 200px;
}