0

I'm working on a photo gallery that will zoom the images during mouse over. Because the page is created dynamically, I won't know the image sizes.

To keep the image quality good, the images are full size and the CSS shrinks them to 50%. On mouse over, the images enlarge to 100%. The problem is that the div blocks take up the original unzoomed-out image size on the page, making spacing a nightmare. (spacing is as if all images were original size)

My thought was to enclose the "zoomed out" div with a parent div (imgholder below) that has it's width permanently set to 50%, this div won't change size when moused over, and should take care of the spacing issue.

This works somewhat if I set the imgholder width\height to a set value (say 300px). But since the images are all different sizes, I need to set the parent div to a percent of the child..

What would be the recommended way to set the parent sizes?

Is there a maybe a better way to do the zoom effect for a photo gallery? (I can't think of a way to use backgrounds since again the images are loaded dynamically)

my CSS is similar to...

.zoomout{
   display: inline-block;
   position: relative;

   -moz-transform:scale(.5); 
   -webkit-transform:scale(.5);
   -o-transform:scale(.5);
}

.zoomout:hover{
    -moz-transform:scale(1); 
    -webkit-transform:scale(1);
    -o-transform:scale(1);
    -ms-transform:scale(1);
}

.imgholder{
    display: inline-block;
    width:200px;  /*this is where i run into problems*/
    height:200px; /*this is where i run into problems*/
}

my HTML is similar to...

<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/4.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/5.jpg"/></div></div>
<div class="imgholder"><div class="zoomout"><img src="_includes/_images/1/_thumb/6.jpg"/></div></div>
dangel
  • 7,238
  • 7
  • 48
  • 74
  • _“I need to set the parent div to a percent of the child”_ – I don’t think that is possible using CSS alone. _“I can't think of a way to use backgrounds since again the images are loaded dynamically”_ – if you can dynamically generate ``, then you should be able to dynamically generate `style="background-image:url(foo)"` just as easily … – CBroe Mar 24 '15 at 02:51
  • 1
    Anyway, you might want to think about using JavaScript for this. Then it would be easy to read the image dimensions once the image has finished loading, and adapt all the rest dynamically. As for not having to change container dimensions while zooming the images, you might want position the images absolutely. Or maybe look into CSS 2D transforms – that would largely decouple the “zoomed” images from the rest of the layout to begin with. – CBroe Mar 24 '15 at 02:54
  • Thanks for that info, I'm not at all opposed to java script, just trying to expand my CSS knowledge. And you're right on the 2nd point, I guess I was trying to stay away from inline styles. – dangel Mar 24 '15 at 02:54

0 Answers0