[CSS][툴팁]이미지 hover 설정 및 after에 contents 전달

결과물

 

 

 

이미지 hover scale 설정

이미지에 hover기능으로 틀 안에서 이미지가 커지는 설정을 알아보겠습니다.

부모요소에 overflow: hidden을 주면 됩니다.

 

// 📁 index.html

<div class="grid_item">
  <img class="filter_img" />
</div>

// 📁 article.css

.grid_item {
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 23vw;
    height: 15vw;
    overflow: hidden; // 👈 이미지가 scale로 커지지만, 이미지를 감싸는 부모 요소가 넘치는 자식 요소를 감춤
    border: 1px solid gray;
}

.filter_img {
    width: 23vw;
    overflow: hidden;  
}

.filter_img:hover { // 👈 hover 동작임을 지정합니다.
    transform: scale(1.1); // 👈 scale을 크게 합니다.
}

 

 

 

after에 컨텐츠 설정

요소 안에서 속성을 둘 때, data-로 시작되어야 css의 content에서 읽을 수 있습니다. 

📁index.html

// 📁 index.html

<div class="grid_item" data-content="툴팁에 넣을 메시지">
  <img class="filter_img" />
</div>

📁 article.css

// 📁 article.css

.grid_item {   // 👈 요소를 []안에 넣기
    position: relative;
    display: flex;
    align-items: flex-end;
    width: 23vw;
    height: 15vw;
    overflow: hidden; 
    border: 1px solid gray;
}

.grid_item::after {
  content: attr(data-content); // 👈 내용 출력
}

.grid_item:hover::after {   // 👈 hover 별도 설정

}

.filter_img {
    width: 23vw;
    overflow: hidden;  
}

.filter_img:hover { 
    transform: scale(1.1); 
}

 

 

 

참고 

MDN-data-*