On Hover Bild vergrößern und Text darüber anzeigen CSS3

Question

Ich versuche, eine reaktionsfähige Bildseite für meine Website zu machen. Bis jetzt habe ich es so gemacht, dass die Bilder auf der Seite alle reaktionsfähig sind und zentriert bleiben für welche Größe auch immer der Browser ist.

Mein Problem ist, dass wenn ich auf ein Bild schwebe, es vergrößert, aber alle anderen Bilder aus seinem Weg schiebt. Ich möchte es so, dass es sich vergrößert aber alle anderen Bilder behalten ihre Position, ich habe absolute Position versucht aber das hat nicht funktioniert.

Auch ich würde wirklich gern Hover Text zu den Bildern hinzufügen, ich möchte es so, dass wenn ein Bild schwebt Sie einen Text aus der Mitte sehen, ich möchte dies mit nur HTML/CSS tun und nicht brauche ein separates Bild für den Text und möglicherweise ohne Javascript.

Hier ist meine aktuelle 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> 

Hier ist meine CSS;

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

Auch hier ist eine JS Geige für Sie eine Live-Version meiner Bildseite sehen http://jsfiddle.net/Z66Z9/ Möglicherweise müssen Sie das ‚Ergebnis‘ Feld erweitern, so dass Sie sehen, was meine Bildseite wirklich aussieht.

Vielen Dank für jede Hilfe.

Answer 1

Bildfokussierung: Verwenden Sie die CSS3 transform: scale Eigenschaft.

Hover Text: Verwenden Sie ein div.wrap und eine :hover Regel in CSS, um den Text zu ändern opacity für 0 bis 1

ändert

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