javascript - Kép nagyítása és szöveg megjelenítése rajta CSS3-ben, amikor fölé viszik az egeret

Próbálok készíteni egy reszponzív képes oldalt a weboldalamhoz. Eddig odáig jutottam, hogy az oldalon lévő képek mind reszponzívak legyenek, és mindig középre legyenek igazítva a böngésző méretétől függetlenül.

Az én problémám az, hogy amikor az egérrel egy kép fölé viszem, az nagyítódik, de minden más képet eltol az útjából. Azt szeretném, hogy nagyítódjon, de minden más kép megtartsa a pozícióját, kipróbáltam az abszolút pozíciót, de ez nem működött.

Szeretnék képekhez lebegő szöveget hozzáadni, szeretném, ha amikor a képre viszik az egeret, a középből látható lenne egy szöveg, szeretném ezt csak HTML/CSS-sel megoldani, és ne legyen szükség külön képre a szöveghez, esetleg JavaScript nélkül.

Itt van a jelenlegi HTML-em;

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

Itt van a CSS-em;

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

Itt van egy JS fiddle is, hogy láthasd az én képoldalam élő verzióját http://jsfiddle.net/Z66Z9/ Lehet, hogy ki kell terjesztened a 'result' dobozt, hogy tényleg lásd, hogyan néz ki az én képoldalam.

Nagyon köszönöm bármilyen segítséget.

Válasz #1

Kép fókuszálása : használd a CSS3 transform: scale tulajdonságot.

Lebegő szöveg: Használj egy div.wrap-et és egy :hover szabályt a CSS-ben a szöveg átlátszóságának 0-ról 1-re változtatásához.

HEGEDŰ

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