Immagine a forma di hover Ingrandisci e mostra testo sopra di esso CSS3

Question

Sto cercando di creare una pagina di immagine reattiva per il mio sito web. Finora l'ho fatto in modo che le immagini sulla pagina siano tutte reattive e centrate per quanto riguarda le dimensioni del browser.

Il mio problema è che quando passo il mouse su un'immagine ingrandisce ma spinge tutte le altre immagini verso l'alto. Mi piacerebbe che ingrandisse ma tutte le altre immagini mantengano la loro posizione, ho provato la posizione assoluta ma questo non ha funzionato.

Inoltre vorrei davvero aggiungere il testo al passaggio del mouse alle immagini, mi piacerebbe che quando si alza l'immagine si veda un testo dal centro, mi piacerebbe farlo con solo html/css e non bisogno di un'immagine separata per il testo e possibilmente senza javascript.

Ecco il mio codice HTML corrente;

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

Ecco il mio 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; 
} 
} 

Anche qui è un violino di JS per voi di vedere una versione live di mia pagina immagine http://jsfiddle.net/Z66Z9/ Potrebbe essere necessario estendere il box 'risultato' così che si può vedere ciò che la mia pagina immagine Sembra veramente.

Grazie mille per qualsiasi aiuto.

Answer 1

Immagine messa a fuoco: utilizzare la proprietà CSS3 transform: scale.

Hover testo: Utilizzare un div.wrap e una regola :hover in CSS per modificare il testo cambia opacity per 0 a 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; 
    } 
}