On hover image enlarge and text display over it CSS3

Question

I am trying to make a responsive image page for my website. So far i have made it so the images on the page are all responsive and keep centred for what ever size the browser is.

My problem is that when i hover on an image it enlarges but pushes all the other images out its way. I would like it so that it enlarges but all the other images keep their position, i have tries position absolute but this didn't work.

Also I would really like to add hover text to the images, I would like it so that when an image is hovered you can see a text from the centre, i would like to do this with just html/css and not need a separate image for the text and possibly without javascript.

Here is my current 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>

Here is my 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;
}
}

Also here is a JS fiddle for you to see a live version of my image page http://jsfiddle.net/Z66Z9/ You may need to extend the 'result' box so that you can see what my image page really looks like.

Thankyou very much for any help .

Answer 1

Image focusing : use the CSS3 transform: scale property.

Hover text : Use a div.wrap and a :hover rule in CSS to change changes the text opacity for 0 to 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;
    }
}