이미지 hover할 때 텍스트보이게 하고 싶어요..!ㅜㅜ

Question

안녕하세요!! 코린이 중 최고 코린이입니다..!이미지 위에 마우스 오버했을 때 배경이 살짝 어두워지면서 텍스트가 보이게 구현 중입니다.이미지는 border-radius를 줘서 둥근 테두리를 가지고 있어요.p태그에는 position: absolute;를 이용해서 하고 있는데 텍스트가 이미지에 가득 차지 않고 사진처럼 보여요ㅠㅠㅠborder-radius가 0이면 잘 나오는 데 있으면 저렇게 나오네요...어떻게 하면 꽉 차게 할 수 있을까요?아니면 다른 방법이 있을까요?ㅜㅜㅜㅜㅜ

라디오 이미지

.grid{ display:grid; /* height: 100vh; */ /* background:#FF0; */ grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-auto-rows: 20px; grid-gap: 20px; position: relative; } .grid-item{ /* .grid 내부에 들어갈 요소 클래스 값 */ width:100%; overflow: hidden; border-radius: 10px; position: relative; } .grid-item > img{ width: 100%; border-radius: 10px; height: auto; } /* .grid-item:hover{ cursor: pointer; filter: brightness(0.5); } */ .hover-text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 0.397); color: #fff; opacity: 0; border-radius: 10px; padding: 10px; /* transition effect. not necessary */ transition: opacity .2s, visibility .2s; height: 100%; } .grid-item:hover .hover-text { visibility: visible; opacity: 1; cursor: pointer; }

cksy33 · Answer

태그는 기본적으로 상하에 margin 값이 들어가있습니다..hover-text 클래스에 margin: 0; 줘보세요.

이미지 hover할 때 텍스트보이게 하고 싶어요..!ㅜㅜ

1개의 답변

Q&A 목록