Inflearn brand logo image

인프런 커뮤니티 질문&답변

nsyunogong99님의 프로필 이미지
nsyunogong99

작성한 질문수

Tailwind CSS 실전 포트폴리오 퍼블리싱

카드 UI 디자인 - figure 카드 호버 이펙트(group 선택자 사용법)

카드 UI 디자인 첫번째 강의 마이너스 마진 질문

작성

·

52

1

<figcaption class="bottom-[-220px] absolute bottom-0 bg-black/70 text-white p-6 w-full group-hover:bottom-0">
            <h3 class="capitalize font-semibold">😍 View detail</h3>
            <p class="my-4">
                Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population.
                Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population.
            </p>
            <a class="bg-blue-400 block text-center p-2 rounded-md hover:bg-blue-500" href="#none">Learn More</a>
        </figcaption>

figcaption 태그의 마이너스 마진값이 p 태그 텍스트 길이에 따라 달라지는 부분을 p 태그 컨텐츠의 길이에 상관없에 h3 태그만 hover 상태가 아닐때 보이도록 하는 방법은 없을까요?

답변 1

1

예제는 bottom을 기준으로 했지만 top을 기준으로 하면 p태그의 텍스트 길이와 관계 없이 할 수 있습니다.

top-[100%] 라면 부모요소의 가장 아래에 붙으니까 top의 좌표를 적당히 조절하시며 됩니다.

예를 들어 top-[95%] 이렇게 h3가 보일 정도로 조절해보세요.

해보시면 아시겠지만 bottom을 기준으로 하는 것이 더 편하실거에요.

nsyunogong99님의 프로필 이미지
nsyunogong99

작성한 질문수

질문하기