llighter
commented
3 years ago 토스 피드에 들어가보면 아래와 같이 효과를 확인할 수 있다.
Hover 효과를 적용할 때 세 가지를 확인할 수 있다.
- 이미지 트랜지션(엘레베이션)
- 이미지 그림자 불투명도? 증가
- 제목 링크의 색 변경
위 세가지를 내 블로그 카드 목록에도 추가하려고 한다.
Closed llighter closed 3 years ago
llighter
commented
3 years ago 토스 피드에 들어가보면 아래와 같이 효과를 확인할 수 있다.
Hover 효과를 적용할 때 세 가지를 확인할 수 있다.
위 세가지를 내 블로그 카드 목록에도 추가하려고 한다.
llighter
commented
3 years ago Tailwind 홈페이지에서는 아래 링크로 Transition 관련 내용을 확인할 수 있다. https://tailwindcss.com/docs/transition-property
토스 블로그와 달리 내 블로그에서 위 내용을 적용하려고 하다 보니 내 카드는 여러 태그들로 이루어져 있어서 엘레베이션은 이미지에만 적용하고 제목에만 텍스트 색을 변경해야하는 이슈가 있었다. 이를 해결하기 위해 아래 링크를 참고 하였다. https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover
llighter
commented
3 years ago
이 기능요청🌟이 어떤 문제와 연관이 있나요? 설명해주세요.
6 에서 구현한 카드UI는 기본적인 UI 형태만 갖췄을 뿐 사용자와 상호작용하지 않는다. 따라서 사용자의 행위에 따라 반응 할 수 있도록 역동성을 추가하고자 한다.
당신이 바라는 해결책💡을 설명해주세요.
https://www.youtube.com/watch?v=AYoQfPX31Mg 를 참고하면
hover동작 시 애니메이션을 넣을 수 있다.추가적인 정보
Tailwind Trainsition 기능을 적극적으로 활용해보자.