javascript - Forstørr bilde ved hover og vis tekst over det CSS3

Jeg prøver å lage en responsiv bilde-side for nettstedet mitt. Så langt har jeg gjort det slik at bildene på siden er alle responsive og holder seg sentrert uansett hvilken størrelse nettleseren har.

Problemet mitt er at når jeg holder musen over et bilde, forstørres det, men presser alle de andre bildene ut av veien. Jeg ønsker at det skal forstørres, men at alle de andre bildene beholder sin posisjon. Jeg har prøvd posisjon absolutt, men dette fungerte ikke.

Jeg vil også veldig gjerne legge til hover-tekst på bildene. Jeg vil at når et bilde hovres over, skal man kunne se en tekst fra midten. Jeg vil gjøre dette med bare HTML/CSS og ikke trenge et separat bilde for teksten, og muligens uten JavaScript.

Her er min nåværende 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>

Her er min 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;
}
}

Her er også en JS fiddle for at du skal kunne se en live-versjon av bildesiden min http://jsfiddle.net/Z66Z9/ Du kan trenge å utvide 'result'-boksen slik at du kan se hvordan bildesiden min virkelig ser ut.

Tusen takk for all hjelp.

Svar #1

Bildefokus: bruk CSS3 transform: scale-egenskapen.

Hover-tekst : Bruk en div.wrap og en :hover-regel i CSS for å endre tekstens opacity fra 0 til 1.

FIOL

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