안녕하세요 이미지 오버 관련 질문드립니다

안녕하세요 이미지 오버 관련 질문드립니다

QA

안녕하세요 이미지 오버 관련 질문드립니다

본문

https://g5test.homweb.co.kr/

안녕하세요

현제 인트로 페이지를 작업을 하고 있는데요

마우스 오버 했을 때 아래쪽에 색상이 지정되어 있는 바가 위로 이미지를 덮게 하고 싶은데 이게 잘 되지 않아서요

제가 에니메이션에 대해서는 좀 많이 앿해서요 혹시 도움 좀 받을 수 있을까 해서요

아래에 배치 되어 있는 바가 이미지를 덥게 되면 텍스트는 그냥 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%;
}
답변을 작성하시기 전에 로그인 해주세요.
전체 773
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT