关于实现带定向悬停放大效果的圆角网格图片画廊的技术咨询

嘿，这个朝着各自角落放大的网格画廊想法真的很有创意！我看了你写的代码，发现几个小问题导致效果没实现，咱们一步步调整，就能做出你想要的效果啦～

先说说你现有代码的核心问题： #

• DOM结构错误：你把四个item*_img_ly放在了网格容器.galeria_grid_ly外面，网格布局完全没起作用，得把它们都放进网格容器里
• 选择器逻辑搞反：.imagen1_ly:hover .item1_img_ly是找hover状态下.imagen1_ly的子元素，但实际.item1_img_ly是它的父元素，这个选择器根本不会生效
• 放大方式不合适：直接修改宽高会打乱网格布局，用transform: scale()配合transform-origin来实现定向放大才是正确思路

调整后的完整代码方案： #

HTML部分

<div class="galeria_grid_ly">
  <div class="item_img_ly item-top-left">
    <a href="../product-detail-page/index.html">
      <span alt="Un recipiente pequeño de arcilla roja con palitos de madera en su interior." class="imagen_ly" style="background-image: url('../photos/palitos_barro.jpg')"></span>
    </a>
  </div>
  <div class="item_img_ly item-top-right">
    <a href="../product-detail-page/index.html">
      <span alt="Una maceta pequeña de arcilla roja con una suculenta parecida a un aloe dentro." class="imagen_ly" style="background-image: url('../photos/mini_maceta_barro.jpg')"></span>
    </a>
  </div>
  <div class="item_img_ly item-bottom-left">
    <a href="../product-detail-page/index.html">
      <span alt="Una amanita muscaria de color verde claro de cerámica." class="imagen_ly" style="background-image: url('../photos/setita_ceramica.jpg')"></span>
    </a>
  </div>
  <div class="item_img_ly item-bottom-right">
    <a href="../product-detail-page/index.html">
      <span alt="Conjunto de 4 jarrones sencillos diferentes hechos con arcilla roja." class="imagen_ly" style="background-image: url('../photos/conjunto_barrito.jpg')"></span>
    </a>
  </div>
</div>

CSS部分

.galeria_grid_ly {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0; /* 去掉间隙，让四张图组成完整正方形 */
  width: 200px; /* 网格总宽度，根据你的需求调整 */
  height: 200px; /* 网格总高度，和宽度一致 */
}

.item_img_ly {
  overflow: hidden; /* 确保放大的部分不会溢出容器 */
  transition: transform 0.5s ease; /* 统一过渡效果 */
}

/* 设置每个角落的圆角和变换原点 */
.item-top-left {
  border-top-left-radius: 10px; /* 圆角大小按需调整 */
  transform-origin: top left; /* 左上角为放大原点 */
}
.item-top-right {
  border-top-right-radius: 10px;
  transform-origin: top right; /* 右上角为放大原点 */
}
.item-bottom-left {
  border-bottom-left-radius: 10px;
  transform-origin: bottom left; /* 左下角为放大原点 */
}
.item-bottom-right {
  border-bottom-right-radius: 10px;
  transform-origin: bottom right; /* 右下角为放大原点 */
}

.imagen_ly {
  display: block;
  width: 100%;
  height: 100%;
  background-size: cover; /* 让图片自适应容器，避免拉伸变形 */
  background-position: center;
}

/* 悬停时放大 */
.item_img_ly:hover {
  transform: scale(1.2); /* 放大比例，按需调整 */
}

关键要点解释： #

1. 网格布局生效：把所有图片容器放进网格容器，通过grid-template-columns/rows分成2x2的网格，去掉间隙让它们组成完整的正方形
2. 定向放大核心：每个容器设置对应的transform-origin，这样hover时用scale()放大就会朝着指定角落延伸
3. 过渡与溢出控制：给容器加overflow: hidden防止图片放大后溢出网格，统一设置过渡动画让效果更平滑
4. 图片自适应：用background-size: cover和background-position: center确保图片在容器内显示正常，不会变形

如果想要更细腻的效果，还可以调整scale的数值或者过渡时长，完全可以根据你的需求灵活修改～

内容来源于stack exchange