如何修改图片画廊CSS 将hover不透明度效果替换为放大效果

修改方案 #

核心修改逻辑 #

• 先给图片外层容器加overflow: hidden，避免图片放大时溢出容器、打乱页面布局
• 移除原有hover的不透明度配置，替换为transform: scale()缩放属性，复用已有的transition过渡实现平滑动画
• 可选添加hover阴影增强效果，可根据自身需求调整

完整修改后CSS代码 #

.sketch-wrapper {
    margin-top: 30px;
    margin-bottom: 30px;
}

div.sketch {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 1.5rem;
}
div.sketch__item {
    border: solid #f5f5f5;
}
div.sketch__item--1, div.sketch__item--2 {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 3;
    overflow: hidden; /* 新增：限制放大后图片不溢出 */
    border-radius: 5px; /* 新增：和图片圆角保持一致，避免边缘突兀 */
}
div.sketch__item--2 {
    grid-column-start: 3;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 3;
}

@media screen and (max-width: 700px) {
    div.sketch {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        width: calc(45% + 1.6em);
    }
}
@media screen and (min-width: 700px) {
    div.sketch {
        display: grid;
        flex-wrap: wrap;
        margin: 0 auto;
        width: calc(65% + 1.6em);
    }
    img.sketch__img:hover {
        /* 移除原有opacity:0.5配置，替换为缩放 */
        transform: scale(1.15); /* 1.15为放大倍率，可自行调整大小 */
        /* 可选保留半透明效果，不需要直接删掉下一行即可 */
        opacity: 0.9;
        /* 可选添加阴影增强悬浮效果，不需要删掉即可 */
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }
    div.anchor {
        text-align: center;
        font-size: 14px;
        padding: 0 5px;
    }
}
.anchor-text {
    font-size: 14px;
    text-align: center;
}
.sketch img {
    display: block;
    border: solid;
    border-color: #fff;
    border-radius: 5px;
    height: 100px;
    width: 200px;
    transition: all 0.5s ease; /* 优化过渡曲线，动画更自然 */
    object-fit: cover;
}

说明 #

• HTML代码无需任何修改，仅替换上述CSS即可生效
• 放大倍率scale(1.15)、过渡时长0.5s、阴影参数都可以根据自己的设计需求调整数值
• 如果不需要保留任何半透明效果，直接删掉hover配置里的opacity行即可

内容的提问来源于stack exchange，提问作者Till Noah