css 이미지에 마우스 올리면 이미지 위에 글자가 움직입니다.

css 이미지에 마우스 올리면 이미지 위에 글자가 움직입니다.

QA

css 이미지에 마우스 올리면 이미지 위에 글자가 움직입니다.

본문

링크 접속하시면 열처리시설 이미지에 마우스 올리시면 글자가 움직이는 걸 확인하실 수 있습니다.

 

아래는 소스코드입니다.

 

저번에는 객체에 height 값을 줘서 비슷한 현상을 없앴는데요.. 이번에는 안되네요..

<div class="detailPageUsedByHeat">
    <div style="width:850px; height:370px; text-align:center; margin:30px auto;">
<span style="float:left;">
<b style="font-size:1.3rem; font-weight:600">열처리시설</b><br><div style="width:385px; height:1px; background-color:#e9ecf4; margin:7px 0 10px 0;"></div>
<img class="heat1" src="../images/heatFacility.png"  alt="열처리시설" title="열처리시설">
</span>
    <span style="float:right; margin-left:20px;">
<b style="font-size:1.3rem; font-weight:600">식물검역본부 열처리등록 번호</b><br><div style="width:385px; height:1px; background-color:#e9ecf4; margin:7px 0 10px 20px;"></div>
<img class="heat2" src="../images/heatMark.png" alt="식물검역본부 열처리등록 번호" title="식물검역본부 열처리등록 번호">
    </span>
    </div>

    <div class="heatModal"><div class="heatModalWrapper"><img src="this" alt="열처리시설 이미지" title="이미지를 누르시면 모달창이 닫힙니다."></div></div>
    
</div>

 

.detailPageUsedByHeat {position:relative; margin-top:15px; width:980px; height:100%; line-height: 180%; font-size:0.95rem; font-weight:300; display:inline-block;}
.detailPageUsedByHeat img.heat1{border:1px solid #cccccc; width:385px; height:290px;}
.detailPageUsedByHeat img.heat2{margin-left:20px; border:1px solid #cccccc; width:385px; height:290px;}
.detailPageUsedByHeat img.heat1:hover,.detailPageUsedByHeat img.heat2:hover{border:5px solid #5074b5;
    box-sizing: border-box;
    transition: all 0.3s ease-out 0s;}

3667674134_1669212287.9529.png

이 질문에 댓글 쓰기 :

답변 1

답변을 작성하시기 전에 로그인 해주세요.
전체 2,086
QA 내용 검색
filter #css ×

회원로그인

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