Khi phóng to hình ảnh di chuột và hiển thị văn bản trên CSS3

Question

Tôi đang cố tạo một trang hình ảnh phản hồi cho trang web của mình. Cho đến nay tôi đã làm cho nó để các hình ảnh trên trang được đáp ứng tất cả và giữ cho trung tâm cho những gì bao giờ kích thước trình duyệt được.

Vấn đề của tôi là khi tôi di chuột lên hình ảnh, nó phóng to nhưng đẩy tất cả các hình ảnh khác ra ngoài. Tôi muốn nó để nó mở rộng nhưng tất cả các hình ảnh khác giữ vị trí của họ, tôi đã cố gắng vị trí tuyệt đối nhưng điều này đã không làm việc.

Ngoài ra tôi thực sự muốn thêm văn bản di chuột vào hình ảnh, tôi muốn nó để khi một hình ảnh được di chuột, bạn có thể thấy văn bản từ trung tâm, tôi muốn làm điều này chỉ với html/css và không cần một hình ảnh riêng cho văn bản và có thể không có javascript.

Đây là HTML hiện tại của tôi;

<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> 

Đây là CSS của tôi;

.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; 
} 
} 

Ngoài ra đây là một fiddle JS để bạn có thể nhìn thấy một phiên bản sống của trang hình ảnh của tôi http://jsfiddle.net/Z66Z9/ Bạn có thể cần phải mở rộng 'kết quả' hộp để bạn có thể xem những gì trang hình ảnh của tôi thực sự trông như thế nào.

Cảm ơn bạn rất nhiều vì đã giúp đỡ.

Answer 1

Lấy nét hình ảnh: sử dụng thuộc tính CSS3 transform: scale.

Hover văn bản: Sử dụng một div.wrap và :hover quy tắc trong CSS để thay đổi thay đổi văn bản opacity cho từ 0 đến 1.

FIDDLE

HTML:

<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 :

#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; 
    } 
}