Cómo puedo ajustar el alto de un div dependiendo de otro div?

[yavierre]

Necesito ayuda

Estaba creando un tema para mi tumblr el cual solo consta en un código en html, css, o cualquier otro lenguaje para diseño web o programación (como javascript)
Pero solo me concentraré en el CSS

En la página diseñé cómo sería la entrada de una imagen, para previsualizarlo, usé una imagen cualquiera, y lo que diseñé consta en lo siguiente:

Cuando se pasa el cursor por sobre la imagen (hover) aparecen sobre esta, botones y textos, bajando la opacidad de esta imagen
Algo similar a este gif que hice



La imagen que se representa con el azul, cuando se le pasa el cursor encima, se muestra sobre ella un div que le puse el nombre de ''sobrefotoup'' (que se representa con el rojo), el cual le puse un ''position:absolute'' para que quede sobre la imagen, un ''overflow:hidden'' y un ''height:250px''(para que no lo oculte el overflow), como las propiedades más importantes.

Pero ahí está el problema:
Si la imagen es muy angosta, estos objetos que deberían aparecer sobre ella, se salen del margen, ya que tiene un height definido, no se ajusta en la imagen, ya probé poniendo ''height:auto'' (se borra, seguramente se define como 0) y ''height:100%'' (llega a hasta el final de la página y pasa lo mismo igual) y no resulta.
Si no me explico bien, este gif explica lo que pasa:



Lo ideal es que fuese así:



La idea es que el overflow:hidden evite que se salga de su margen, pero para eso, necesito que se ajuste el height dependiendo del alto de la imagen, seguramente necesito un Javascript, o quizás un div que haga el trabajo pero no sé cómo hacerlo
O quizás tener un div que ajuste el height para ambos dependiendo del contenido más pequeño (que debería ser la imagen)

Borrando lo que no es importante, y sacando los botones del div ''sobrefotoup'' que tampoco es importante si quiero solucionar esto y solo alargará el código, este es el código de este extracto de la página:

El CSS

Código CSS:

.entrada_foto{
    margin-bottom:20px;
}
 
    .photo{ /*el div que encierra la foto, nada importante*/
        border-color:#CCC;
        border-style:solid;
        border-width:thin;
        width:500px;
    }
    
        .sobrefondo:hover .photo img{ /* se pasa el cursor sobre la foto y se vuelve transparente */
            opacity:0.15;
            transition: all 0.2s ease-out;
            -webkit-transition: all 0.2s ease-out;
            -moz-transition: all 0.2s ease-out;
        }
        
        .sobrefondo .photo img{
            opacity:1;
            transition: all 0.3s ease-out;
            -webkit-transition: all 0.3s ease-out;
            -moz-transition: all 0.3s ease-out;
        }
        
 
.sobrefotoup{ /* este es el div que tanto mencioné */
    position:absolute;
    background-color:#6FF; /*para que puedan distinguir el espacio que ocupa este div*/ 
    opacity:0;
    width:500px;
    height:150px;
    overflow:hidden;
    z-index:10;
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
}
    .sobrefondo:hover .sobrefotoup{
        opacity:0.5;
        transition: all 0.2s linear;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
    }
 

Y el HTML:

Código HTML:

<div class="entrada_foto"><div class="sobrefondo">
<div class="sobrefotoup">
Aqui iva todo el contenido
</div>
 
<div class="photo">
<img src="http://24.media.tumblr.com/tumblr_m3te025qlh1qlv7jmo1_500.jpg"/> <!--- prueben cambiando esa imagen a una bien ancha pero también bien angosta, de esta forma se encontrarán con el problema (como mostré en el segundo gif) */ -->
</div>
</div></div>
 

Alguno que sepa cómo ayudarme con esto?

Se lo agradesco de antemano :D