호버 이미지 확대 및 텍스트 표시 CSS3

Question

내 웹 사이트에 반응 형 이미지 페이지를 만들려고합니다. 지금까지 나는 페이지의 이미지가 모두 응답하고 브라우저의 크기가 어느 정도인지를 파악하기 위해 이미지를 만들었습니다.

내 문제는 내가 이미지 위에 마우스를 올리면 이미지가 확대되지만 다른 모든 이미지가 그 방향으로 튀어 나오게된다는 것입니다. 나는 그것을 확대하기를 원하지만 다른 모든 이미지는 자신의 위치를 ​​유지하기를 원한다. 절대 위치를 시도하지만 이것은 효과가 없다.

또한 이미지에 마우스를 가져 가면 텍스트를 추가하고 싶습니다. 이미지가 들쑥날쑥 해지면 센터의 텍스트를 볼 수 있기 때문에 HTML/CSS와 함께하고 싶습니다. 텍스트와 자바 스크립트가없는 별도의 이미지가 필요합니다.

다음은 현재 HTML입니다.

<div class="imgwrap"> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
<img src="http://placehold.it/120x120" alt="DTE" /> 
</div> 

여기 내 CSS입니다. 내 이미지 페이지 http://jsfiddle.net/Z66Z9/ 당신은 내 이미지 페이지가 실제로 어떻게 생겼는지 볼 수 있도록 '결과'상자를 확장해야 할 수도 있습니다 의 라이브 버전을 볼 수 있도록

.imgwrap { 
width:90%; 
margin:0 auto; 
padding:5px; 
overflow:hidden; 
text-align:center; 
} 
.imgwrap img { 
display:inline-block; 
width:300px; 
height:200px; 
margin:5px; 
cursor:pointer; 
-webkit-transition:opacity 0.26s ease-out; 
-moz-transition:opacity 0.26s ease-out; 
-ms-transition:opacity 0.26s ease-out; 
-o-transition:opacity 0.26s ease-out; 
transition:opacity 0.26s ease-out; 
border-style:solid; 
border-color:black; 
border-width:1px; 
padding:5px; 
transition:500ms; 

} 



.imgwrap:hover img { 
opacity:0.5; 
} 

.imgwrap:hover img:hover { 
opacity:1; 
width:400px; 
height:266px; 
transition:500ms; 
} 

@media screen and (max-width:500px) { 
.imgwrap img { 
    width:200px; 
    height:133px; 
} 
} 

또한 여기에 JS 바이올린입니다.

도움을 주셔서 대단히 감사합니다.

Answer 1

이미지 집계 :은 CSS3 transform: scale 속성을 사용합니다.

호버 텍스트

:

<div id="container"> 
    <div class="wrap"> 
     <img src="http://lorempixel.com/output/fashion-q-g-640-480-2.jpg" alt="DTE" /> 
     <p>Text here</p> 
    </div> 
    <div class="wrap"> 
     <img src="http://lorempixel.com/output/city-q-c-640-480-2.jpg" alt="DTE" /> 
     <p>Text here</p> 
    </div> 
    <div class="wrap"> 
     <img src="http://lorempixel.com/output/sports-q-g-640-480-4.jpg" alt="DTE" /> 
     <p>Text here</p> 
    </div> 
    <div class="wrap"> 
     <img src="http://lorempixel.com/output/nature-q-c-640-480-8.jpg" alt="DTE" /> 
     <p>Text here</p> 
    </div> 
    <div class="wrap"> 
     <img src="http://lorempixel.com/output/fashion-q-c-640-480-7.jpg" alt="DTE" /> 
     <p>Text here</p> 
    </div> 
</div> 

CSS : 사용하십시오 div.wrap 및 변경 CSS에서 :hover 규칙 1.

FIDDLE

HTML 0의 텍스트 opacity 변경 :

#container { 
    text-align:center; 
    margin: 50px; 
} 
.wrap{ 
    display:inline-block; 
    position:relative; 
    cursor:pointer; 
} 
.wrap p{ 
    position:absolute; 
    opacity:0; 
    top:50%; 
    left:-8%; 
    padding:5px; 
    text-align:center; 
    width:113%; 
    font-size:20px; 
    line-height:20px; 
    margin-top:-10px; 
    z-index:3; 
    background:rgba(255,255,255, 0.7); 
    transition:1s; 
} 

.wrap img { 
    display:block; 
    width:300px; 
    height:200px; 
    margin:5px; 
    -webkit-transition:opacity 0.26s ease-out; 
    -moz-transition:opacity 0.26s ease-out; 
    -ms-transition:opacity 0.26s ease-out; 
    -o-transition:opacity 0.26s ease-out; 
    transition:opacity 0.26s ease-out; 
    transition:500ms; 
} 
#container:hover img { 
    opacity:0.5; 
} 
#container:hover .wrap:hover img { 
    opacity:1; 
    -webkit-transform: scale(1.2); 
    -moz-transform: scale(1.2); 
    -ms-transform: scale(1.2); 
    -o-transform: scale(1.2); 
    transform: scale(1.2); 
    z-index:2; 
    position:relative; 
    transition:500ms; 
} 
.wrap:hover p { 
    opacity :1; 
} 


@media screen and (max-width:500px) { 
    #container img { 
     width:200px; 
     height:133px; 
    } 
}