Coordinate Width:Height Percentages for Images (Shrunk on Browser Resize)

I have created this "container" into which I place images (so that I can place text under them that shows up on hover).

Code:

---

                .image-container {
                position: relative;
                float: right;
                overflow: hidden;
                width: 290px;
                height: 290px;
                margin: 0;
                }

---

I am trying to figure out if there is any way of getting the width and the height to be equal percentages, instead of pixel amounts, so that when a browser resizes, they remain the same proportions, but get smaller.

Something like:

Code:

---

                width: 25%;
                height: width;

---

The width is the governing dimension, and that works, but the height cannot be the same percentage, because then it won't be a square (it actually doesn't work at all with the height, never mind the varying dimension). It works if I put the width as a percentage and leave the height in pixel amounts, but that's not what I want.

I tried "height:auto;" and that also didn't work.

Thanks!

I found a different way of doing it that works to shrink the images as the browser resizes - putting them in a list that adjusts in size - but I can't yet figure out how, in this styling, to put text behind the images that shows up on hover (image rollover).

I also don't understand why the list automatically creates 7px space between the rows, which I had to subtract.

Code:

---


                #small ul {
                  list-style: none;
                margin-top: 50px;
                }

                #small ul li {
                display: inline-block;
                float:right;
                margin: -7px 0 0;
                width:25%;
                }

                #small ul li img {
                    width: 100%;
                }


          <div id="small">
                <ul>
                    <li>
                        <img src="image.jpg">
                    </li>
                    <li>
                        <img src="image.jpg">
                    </li>
                    <li>
                        <img src="image.jpg">
                    </li>
                    <li>
                        <img src="image.jpg">
                    </li>
                    <li>
                        <img src="image.jpg">
                    </li>
                </ul>
        </div>

---

If I tell it to not display the image on hover, then the image does disappear, but all the other images shift around to fill the hole left by the image that is not showing now.
Where in the code to put the text or some kind of text box so it appears?

Also, how to make the text font size shrink as the list size shrinks?

Code:

---


            #small ul li img:hover {
                display:none;
                }

---

I got the text to be on top of the image, and the image to disappear on hover (opacity).
But I can't get the text not to show up on top of the image in the first place.
I tried using the z-index to put it lower than the image z-index, and I also tried to change the text opacity on hover (having it set to 0 on "not hover"), but neither worked.

CSS:

Code:

---

                #small ul {
                list-style: none;
                margin-top: 50px;
                }
               
                #small ul li {
                display: inline-block;
                float: right;
                margin: -7px 0 0;
                width:25%;
                }
               
                #small ul li img {
                    width: 100%;
                }
               
                #small img:hover {
                        opacity: 0;
                        -webkit-transition: all 300ms ease;
                        -moz-transition: all 300ms ease;
                        -ms-transition: all 300ms ease;
                        -o-transition: all 300ms ease;
                        transition: all 300ms ease;
                        }
                       
                #small h2 {
                        position: absolute;
                        top: 25%;
                        text-align: center;
                        font-weight: 500;
                        font-size: 2.1em;
                        color: #333;
                }
                               
                .smallclass {
                        position: relative;
                        width:100%;
                        text-align: center;
                        }

---

HTML:

Code:

---

          <div id="small">
                <ul>
                    <li class="smallclass">
                                    <a href="some.html"><h2>description</h2>
                                    <img src="image.jpg" alt="something"></a>
                    </li>
                    <li class="smallclass">
                                    <a href="some.html"><h2>description</h2>
                                    <img src="image.jpg" alt="something"></a>
                    </li>
                </ul>
        </div>

---

Well, I figured out the answer to this myself in the script of the following website.
http://www.tylerfinck.com/

I think it has to do with slowly changing the opacity, and also putting a sort of placeholder off to the side.
I don't completely understand it, but it works.

The website owner above/designer, recommended these two links as a resource:

http://webdesignerwall.com/tutorials...ign-in-3-steps
http://masonry.desandro.com/