작성
·
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을 기준으로 하는 것이 더 편하실거에요.