I have been working on creating a responsive image page for my website. I've managed to make the images responsive and centered, no matter the size of the browser window.
However, I encountered an issue where when I hover over an image, it enlarges and pushes all the other images out of its way. Ideally, I want the hovered image to enlarge while keeping the position of the other images unchanged. I attempted using position absolute, but unfortunately, it didn't work as expected.
Another feature I would like to implement is adding hover text to the images. I envision that when an image is hovered over, text will appear at the center of the image. I hope to achieve this effect using just HTML/CSS without relying on a separate image file for the text or resorting to JavaScript.
Below is the current HTML code:
<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 the CSS code:
.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;
}
}
For a live demonstration of my image page, you can visit the following JS Fiddle link: http://jsfiddle.net/Z66Z9/. Please make sure to expand the 'result' box to get a better view of how my image page appears.
Thank you in advance for any assistance provided.