유동 격자가 있습니다 : width:33.3%. 이 블록에 포함 된 이미지 마녀는 width: 100%및 height: auto. 이 이미지에 마우스 오버시 확대 효과를 추가하고 싶습니다. 그러나 유동 격자로 블록 높이를 변경하지 않고 수행하는 방법에 대한 아이디어가 없습니다. 아래에서 내 코드 스 니펫을 볼 수 있습니다.
그것을 해결하는 방법에 대한 아이디어가 있습니까?
.split.third {
width: 33.3%;
display: block;
float: left;
overflow: hidden;
}
.split.third img {
width: 100%;
height: auto;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.split.third:hover img {
width: 120%;
}<div class="split-wrap">
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png" />
</div>
</div>
</div>사용 transform: scale(1.2).
.split.third {
width: 33.3%;
display: block;
float: left;
overflow: hidden;
}
.split.third img {
width: 100%;
height: auto;
-webkit-transition: -webkit-transform 1s ease;
transition: -webkit-transform 1s ease;
transition: transform 1s ease;
transition: transform 1s ease, -webkit-transform 1s ease;
}
.split.third:hover img {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}<div class="split-wrap">
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png">
</div>
</div>
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png">
</div>
</div>
<div class="split third">
<div class="cover">
<img src="http://cs5-3.4pda.to/5290239.png">
</div>
</div>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다