호버 위에서 이미지를 크게 확대하면 편리합니다.

Question

나는 호버 위에서 더 큰 이미지를 보여주기 위해 꽤 간단한 CSS를 사용합니다. 이것은 HTML 구조입니다 :

<div class="Enlarge"> 
<img src="small.jpg" /> 
<span><img src="large.jpg" /></span> 
</div> 

그리고 여기에 CSS의 :

.Enlarge { 
position:relative; 
}  
.Enlarge span { 
position:absolute; 
left: -9999px; 
} 
.Enlarge span img { 
margin-bottom:5px; 
}  
div.Enlarge:hover{ 
z-index: 999; 
cursor:pointer; 
}  
div.Enlarge:hover span{ 
top: 110px; 
left: 0px; 
z-index: 999; 
width:500px; 
height:300px; 
padding: 10px; 
background:#eae9d4; 
-webkit-box-shadow: 0 0 20px rgba(0,0,0, .75)); 
-moz-box-shadow: 0 0 20px rgba(0,0,0, .75); 
box-shadow: 0 0 20px rgba(0,0,0, .75); 
-webkit-border-radius: 8px; 
-moz-border-radius: 8px; 
border-radius:8px; 
font-family: 'Droid Sans', sans-serif; 
font-size:12px; 
line-height:18px; 
text-align: center; 
color: #495a62; 
padding-bottom:20px; 
} 

그러나, 나는 더 큰 이미지 인/아웃 효과에 용이성을 추가하고 싶습니다. 나는 그것을 해결할 수 없었다. 에 전환을 적용하면 이미지가 왼쪽에서 슬라이드됩니다. 이것은 내가 원하는 것이 아닙니다. 이미지에 효과를 적용하면 효과가 적용되지 않습니다. 사용자의 입력을 사전에 Example

감사 :

다음은 예입니다!

Answer 1

가시성 및 불투명도를 사용하면 페이드 효과를 얻을 수 있습니다.

JSFiddle Demo

추가 이러한 스타일 :

.Enlarge span { 
position:absolute; 
left: -9999px; 
visibility: hidden; 
opacity: 0; 
-webkit-transition: opacity 0.5s ease; 
-moz-transition: opacity 0.5s ease; 
-ms-transition: opacity 0.5s ease; 
-o-transition: opacity 0.5s ease; 
transition: opacity 0.5s ease; 
} 

div.Enlarge:hover span { 
    visibility: visible; 
    opacity: 1; 
    /* rest of your styles below */