Cargo Collective：图片画廊Hover时背景显示悬浮图片实现问询

完全可行，以下是具体实现方案：

前提说明 #

假设你的{image 10}、{image 8}、{image 7}最终会被渲染成类似<img src="图片地址" alt="描述">的标准图片标签，我们基于这个前提编写代码。

1. 调整HTML结构 #

给每个图片添加独立容器，方便控制hover状态：

<hr>
<div grid-row="" grid-pad="2" grid-gutter="4" grid-responsive="">
    <div grid-col="x9" grid-pad="2"><b>Project 1</b><br><span style="color: rgba(0, 0, 0, 0.4);">2021</span><br></div>
    <div grid-col="x9" grid-pad="2" class="">
    Text regarding project here</div>
    <div grid-col="x9" grid-pad="2" class=""><b>Area of Expertise</b><br><small><font color="rgba(0, 0, 0, 0.501960784313726)"><span style="letter-spacing: 0.488678px;"><a href="RESEARCH" rel="history" data-tags="RESEARCH">Research,</a> <a href="CURATION" rel="history" data-tags="CURATION">Curation</a></span></font></small></div>
    <div grid-col="x9" grid-pad="2" class="">
        <div class="image-gallery" gid="75">
            <!-- 为每个图片添加包裹容器 -->
            <div class="gallery-item">{image 10}</div>
            <div class="gallery-item">{image 8}</div>
            <div class="gallery-item">{image 7}</div>
        </div>
    </div>
</div>

2. 添加核心CSS样式 #

通过:hover伪类和背景属性实现悬浮效果：

/* 画廊容器基础样式 */
.image-gallery {
    position: relative;
    min-height: 400px; /* 根据需求设置高度 */
    overflow: hidden;
}

/* 单个图片项样式 */
.gallery-item {
    display: inline-block;
    margin: 8px;
    cursor: pointer;
    position: relative;
    z-index: 2; /* 确保缩略图在背景上方 */
}

.gallery-item img {
    max-width: 150px; /* 缩略图尺寸，按需调整 */
    height: auto;
    transition: opacity 0.3s ease;
}

/* 背景层默认隐藏 */
.image-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* hover时显示对应图片背景 */
.gallery-item:hover ~ .image-gallery::before {
    opacity: 0.6; /* 背景透明度，可自定义 */
}

3. 备选：JS辅助方案（若CSS选择器受限） #

如果画廊结构特殊导致CSS选择器不生效，用JS动态设置背景：

const galleryItems = document.querySelectorAll('.gallery-item');
const imageGallery = document.querySelector('.image-gallery');

galleryItems.forEach(item => {
    const img = item.querySelector('img');
    if (!img) return;
    
    item.addEventListener('mouseenter', () => {
        imageGallery.style.setProperty('--bg-image', `url(${img.src})`);
        imageGallery.classList.add('bg-active');
    });
    
    item.addEventListener('mouseleave', () => {
        imageGallery.classList.remove('bg-active');
    });
});

对应调整CSS：

.image-gallery::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: var(--bg-image);
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.image-gallery.bg-active::before {
    opacity: 0.6;
}

你可以根据实际需求调整背景透明度、缩略图大小、过渡动画速度等参数。

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