El efecto de Div desplegable marca distintos errores según el foro en el que se use

Buenas. He tratado en medida de lo posible no venir a incordiar con preguntas cada vez que tengo un problema, pero en este caso realmente ya no sé qué más hacer para arreglarlo, así que me veo en la necesidad de pedir ayuda para ver qué está pasando.

Siguiendo el tutorial del div desplegable, hice otra versión en la cual la cajita que se despliega hacia abajo deberá mostrar una imagen. En Codepen todo sale perfecto, se ve de lo más bien, pero al momento de colocarla en los foros empiezan a surgir todo tipo de problemas. En mi foro de pruebas, el padding no me lo toma. Aquí sí aparece el efecto del padding, pero la imagen no se oculta del todo antes de ser desplegada.







Por eso pienso que hay algo malo con el código... Lo revisé mil veces, pero no encuentro el error.

Lo otro que quería preguntar era si era posible hacer que la cajita oculta se mantuviera desplegada hasta retirar por completo el mouse del contenido de la misma, ya que actualmente sólo se mantiene desplegada con el mouse sobre la cajita de cabecera con el color salmón.

Dejo directamente el código aquí abajo:

Código:

<style>#raya { width: 500px; background-color: #fcbaa9; font-family: arial; font-size: 14px; padding: 15px; text-align: center; color: #000;} #contenido { width: 520px; height: 40px; background-color: transparent; overflow: hidden; display: hidden; transition:0.5s linear; padding: 5px; margin-top: -10px; color: transparent;} #imagen {margin: auto; display: none; transition:0.5s linear; max-width: 520px;} #raya:hover + #contenido {width: 520px; height: 300px; transition:0.5s linear; margin-top: 0px; background-color: #ddd; display: block; color: #000000;} #raya:hover + #contenido #imagen {display: block;}</style>



<div id="raya">probando título</div><div id="contenido"><img id="imagen" src="https://i.imgur.com/uSCQGlh.jpg" width="520"></div>

Bueno... me quedaré aquí esperando a que alguien se apiade y sepa decirme dónde está el error del código para que funcione como tiene que funcionar en los foros

Pues era una chorrada tremenda, pero en vez de usar la baliza como width="520", te he puesto un style y se ha resuelto  xDDDDDD FA suele tomar los códigos como le sale de ahí  

Código:

<style>#raya { width: 500px; background-color: #fcbaa9; font-family: arial; font-size: 14px; padding: 15px; text-align: center; color: #000;} #contenido { width: 520px; height: 40px; background-color: transparent; overflow: hidden; display: hidden; transition:0.5s linear; padding: 5px; margin-top: -10px; color: transparent;} #imagen {margin-top:-10px; display: none; transition:0.5s linear; max-width: 520px;} #raya:hover + #contenido {width: 520px; height: 300px; transition:0.5s linear; margin-top: 0px; background-color: #ddd; display: block; color: #000000;} #raya:hover + #contenido #imagen {display: block;}</style>



<div id="raya">probando título</div><div id="contenido"><img id="imagen" src="https://i.imgur.com/uSCQGlh.jpg" style="width:520px;"></div>

Oh por dios X'DDDD ya sabía que tenía que ser una tontera el error que me daba. ¡Muchas gracias!

¿Tienes alguna idea de cómo lograr que la cajita quede desplegada con el mouse sobre la imagen del contenido? Estuve probando meterle márgenes a las otras partes internas para (según yo) lograr ese efecto, pero mis maravillosas manos tienen el don milagroso de destartalar cada código que toco y resultó cualquier desastre X'DDD

Mi idea en un principio era poder desplegar la cajita al colocar el mouse sobre la barrita de color, y que al bajarlo por el contenido esta continuase desplegada, hasta quitar el puntero de la sección como tal. Pero lo más que logré hacer fue poner el efecto en la barra, y de ahí no pasé

Muchas gracias a Lior por responder la duda, solo voy a añadir que los códigos que hacemos en Codepen a veces pueden generar errores al pasarlos a foroactivo ya que foroactivo lee algunos 'saltos de linea' o espacios en el código de forma literar y hace que nuestro código se mueva al momento de previsualizarlo en el foro. Recomiendo usar Codepen o JSfiddle para armar las bases de un código pero siempre al pasarlo a foroactivo habrá que hacer modificaciones para alinearlo perfectamente.

Shiki escribió:Oh por dios X'DDDD ya sabía que tenía que ser una tontera el error que me daba. ¡Muchas gracias!

¿Tienes alguna idea de cómo lograr que la cajita quede desplegada con el mouse sobre la imagen del contenido? Estuve probando meterle márgenes a las otras partes internas para (según yo) lograr ese efecto, pero mis maravillosas manos tienen el don milagroso de destartalar cada código que toco y resultó cualquier desastre X'DDD

Mi idea en un principio era poder desplegar la cajita al colocar el mouse sobre la barrita de color, y que al bajarlo por el contenido esta continuase desplegada, hasta quitar el puntero de la sección como tal. Pero lo más que logré hacer fue poner el efecto en la barra, y de ahí no pasé

Vale, quieres que la imagen sea una extensión de la propia barrita, ¿no? Que cuando mueves el ratón a la imagen no se te mueva, entiendo. He probado 1000 maneras y no se me ocurre nada. Hice algo así hace tiempo, pero era con texto, pero al intentar extrapolarlo con la imagen, no me ha quedado como quiero...

En mi cabeza, la lógica me dice que todo lo que tiene que ver con la imagen, debería estar contenido dentro de la barrita. Es decir, ahora son dos elementos separados, así que el código debería ser, más o menos este:

Código:

<div id="raya">probando título<div id="contenido"><img id="imagen" src="https://i.imgur.com/uSCQGlh.jpg" style="width:520px;"></div></div>

Pero por más combinaciones que he probado... no llega a funcionar. De hecho, sí consigo que al pasar el mouse el cuadro del hover se quede anclado hasta que quitas el cursor, pero la imagen no se ve :( Quizás @Roshio pueda ayudarte mejor que yo. Ya lo siento...

Gracias a ambos por contestar al final llegué a la misma conclusión que Lior: con texto funciona porque es posible ocultarlo, pero con imágenes no.

Tuve que hacer la transición en el mismo div en vez de partirlo en dos, así que por ahora esa fue la solución que le encontré.

De todos modos muchas gracias por tomarse su tiempo