होवर छवि पर विस्तार और टेक्स्ट डिस्प्ले पर 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> 

यहां मेरा सीएसएस है; क्या आप मेरी छवि पेज 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; 
} 
} 

इसके अलावा यहां एक जे एस बेला है।

किसी भी मदद के लिए धन्यवाद।

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> 

सीएसएस: उपयोग एक div.wrap और सीएसएस में एक :hover नियम बदलने के लिए पाठ opacity को 1.

FIDDLE

एचटीएमएल 0 के लिए बदल जाता है :

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