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

아래는 소스코드입니다.

저번에는 객체에 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;}