[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover)

참고

[Ajax] 맥도날드에다가 데이터 넣기 (tistory.com)

[Ajax] 맥도날드에다가 데이터 넣기

[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover) (tistory.com)

[CSS] 마우스 사진에 올렸을 때 제목 띄우도록 만들기 (hover)

 

---

HTML

  <div class="item-container">
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_1.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_2.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_3.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_4.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_5.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_6.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_7.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_8.jpg" />
            </div>
            <div class="item">
              <div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>
              <img src="img/ring_9.jpg" />
            </div>
          </div>

이렇게 html 수정해줌.

<div class="overlay-wrap">
                <div class="overlay">
                  <p>제목</p>
                  <p>가격</p>
                </div>
              </div>

item 태그 안에다가 제목하고 가격을 추가시켜줬다.

---

CSS

// 서브페이지 아이템
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
  gap: 2vw; /* 아이템 간 간격 */
  .item {
    position: relative;
    img {
      object-fit: cover;
      width: 100%; // 이거 해야 창 확대 할 때 안 어긋남.
      // height: 100%;
    }
    &:hover {
      box-sizing: border-box;
      border: 1px solid $main_color;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      // opacity: 0.5;
    }
    &:hover .overlay-wrap {
      background-color: rgba(0, 0, 0, 0.6);
      opacity: 1;
    }
  }
}
.overlay-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: end;
  opacity: 0;
  transition: background-color 0.3s ease;
  .overlay {
    text-align: center;
    width: 100%;
    color: white;
    padding: 10px;
    border: 1px solid black;
  }
}

1) overlay-wrap을 position 으로 띄워서 제목하고 가격을 아이템 위에 올려야 함.

= item(overlay-wrap의 부모) 에다가

position:relative 를 줘서 띄울 수 있는 기준점을 부여.

2) overlay-wrap 에다가 position 으로 글자 띄우기 

position:absolute 부여해서 글자 띄워준다.

 display: flex;
  justify-content: center;
  align-items: end;

flex 도 부여해서 가운데 정렬 그리고 하단에 정렬

opacity를 0으로 줘서 투명하게 해줌.

 

overlay 의 border, padding 은 임의지정

  &:hover .overlay-wrap {
      background-color: rgba(0, 0, 0, 0.6);
      opacity: 1;
    }

item 을 호버할 때의 overlay-wrap 의 스타일링 지정.

= opacity가 1 로 되면서

아까 opacity 0으로 지정했던게 1 로 다시 보여지도록 스타일링 된다.

 

---

SCSS 정리하고 최종 스타일링

// 서브페이지 아이템
.item-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열로 균등 분할 */
  gap: 2vw; /* 아이템 간 간격 */
  .item {
    overflow: hidden;
    position: relative;
    border: 1px solid transparent; /* border는 투명하게 유지, hover 시 색상만 변경 */
    // 들썩거림 방지
    transition: transform 0.3s ease, border-color 0.3s ease,
      box-shadow 0.3s ease;
    .overlay-wrap {
      z-index: 10;
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: end;
      opacity: 0;
      transition: background-color 0.3s ease;
      .overlay {
        text-align: center;
        width: 100%;
        color: black;
        padding: 1.2vw;
        font-size: 1vw;
      }
    }

    img {
      object-fit: cover;
      width: 100%; // 이거 해야 창 확대 할 때 안 어긋남.
     height: 100%;
    }
    &:hover {
      box-sizing: border-box;
      border: 1px solid $main_color;
      box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
      // opacity: 0.5;
    }
    &:hover .overlay-wrap {
      opacity: 1;
    }
    &:hover img {
      transform-origin: center center;
      transform: scale(1.2); /* 이미지 확대 */
    }
  }
}

호버시 img 크기를 scale 통해 커지게 함.

= 이미지 크기를 키우니 이미지들이 hover 되면서 덜그럭 거리는 현상 발생.

= item 에

 border: 1px solid transparent; /* border는 투명하게 유지, hover 시 색상만 변경 */

이거 추가해주니까 그런 현상 멈춤.

---

1. 요소 크기의 고정

HTML 요소의 border는 그 두께에 따라 요소의 전체 크기에 영향을 미칩니다.

예를 들어, border: 1px solid black;를 사용하면 요소의 크기가 그 두께만큼 증가합니다.

그러나 hover 상태에서만 border를 추가하게 되면, 평소에는 없던 border가 생기면서 요소의 크기가 변하게 되고,

그로 인해 "들썩거리는" 현상이 발생합니다.

2. border의 투명색 사용

이를 방지하기 위해 처음부터 border를 두지만,

hover 상태가 아닐 때는 그 border를 보이지 않게 설정하는 것입니다.

여기서 transparent는 투명색을 의미하며, 눈에 보이지 않는 border가 적용됩니다.

 

이렇게 하면:

• 요소의 크기는 항상 border를 포함한 상태로 유지됩니다.
• hover 시에는 단순히 border의 색상만 변경되기 때문에 크기 변화가 없고, 들썩거림도 발생하지 않습니다.

3. 비교

• Before (hover 시에만 border 추가)
  • 평상시: border 없음 → 요소 크기 작음
  • hover 시: border 추가됨 → 요소 크기 커짐 → 들썩거림 발생
• After (항상 투명한 border 유지)
  • 평상시: border: 1px solid transparent; → 요소 크기 고정됨
  • hover 시: border 색상만 변경 → 요소 크기 그대로 → 들썩거림 없음

4. 정리

border: 1px solid transparent;를 사용하여 처음부터 요소의 크기를 고정시키고,

hover 시 색상만 바꾸는 방식으로 크기 변화를 피하면서 hover 효과를 부드럽게 적용할 수 있습니다.

이 방법은 시각적으로 변화가 없는 상태에서도 요소의 크기를 미리 고정해 두기 때문에,

hover 시 발생할 수 있는 레이아웃의 들썩거림이나 깨짐 현상을 방지하는 데 매우 유용합니다.