안녕하세요 이미지 오버 관련 질문드립니다
본문
안녕하세요
현제 인트로 페이지를 작업을 하고 있는데요
마우스 오버 했을 때 아래쪽에 색상이 지정되어 있는 바가 위로 이미지를 덮게 하고 싶은데 이게 잘 되지 않아서요
제가 에니메이션에 대해서는 좀 많이 앿해서요 혹시 도움 좀 받을 수 있을까 해서요
아래에 배치 되어 있는 바가 이미지를 덥게 되면 텍스트는 그냥 z-index로 처리를 하면 되는 것으로 알고 있는데 에니메이션을 어떻게 주어야 할지 좀 막막 해서요
이게 그리고 css로만 가지고 가능 한 것인지 아니면 스크립트를 사용을 해야 하는지도 의문이기도 하구요
전문가분의 답변 부탁 드립니다.
혹시 몰라서 링크도 같이 남겨 드립니다.
/*.section > a > div.introBtn { position: absolute; bottom: 70px; left: 50%; transform: translateX(-50%); width: 160px; height: 50px; line-height: 48px; font-size: 16px; color: #fff; text-align: center; border: 1px solid #fff; box-sizing: border-box; transition: .4s; }*/
.section > a > div.introBtn01 { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; height: 18px; background-color: #E09449; line-height: 48px; box-sizing: border-box; transition: .4s; }
.section > a > div.introBtn02 { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; height: 18px; background-color: #449DD5; line-height: 48px; box-sizing: border-box; transition: .4s; }
.section > a > div.introBtn03 { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); width: 100%; height: 18px; background-color: #E04C54; line-height: 48px; box-sizing: border-box; transition: .4s; }
.section > a:hover > div.introBtn01 { background-color: #E09449; }
.section > a:hover > div.introBtn02 { background-color: #449DD5; }
.section > a:hover > div.introBtn03 { background-color: #E04C54; }
답변 1
.section > a > div.text {
z-index: 1;
}
.section > a:hover > div.introBtn01,
.section > a:hover > div.introBtn02,
.section > a:hover > div.introBtn03 {
height: 100%;
}
완전 초대박
정말 감사 드립니다
답변을 작성하시기 전에 로그인 해주세요.
