A ver...estoy haciendo una tablita. Y las dos ultimas imagenes (relaciones importantes) por algún motivo, el texto me sale descuadrado. El tamaño es el mismo que las otras (es el mismo código) así que realmente no se porque las dos primeras se ven bien y las otras dos no.
Dejo el codigo:
- Código:
<style>@import url('https://fonts.googleapis.com/css?family=Sree+Krushnadevaraya');.cajaentera{text-align:center;background-color:#0B0808; border-left: 10px solid #890000; border-right: 10px solid #890000; width: 500px;}.Titulo{color:#890000;font-size: 25px;font-family: 'Sree Krushnadevaraya';text-align:center; letter-spacing: 3px;}.cajainfo{background-color:#423535;width: 500px;}.cajainfo{width: 500px;height: 200px;}.imagen:hover .informacion{opacity: 1; transition:0.5s linear;-webkit-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);top:-300}.imagen{overflow:hidden;width: 500px; height: 200px;}.informacion{transition: 0.5s linear;-webkit-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); transform: scale(0.2);opacity: 0;margin-top: -250px;background-color: black; background-color: rgba( 0, 0, 0, 0.5);color: white; font-size: 10px; padding-left: 8px; padding-top: 13px;padding-right: 10px; width: 500px; height: 200px;overflow:auto;}.cajalegend{padding: 10px;}.titurelas{color:#890000;font-size: 19px;font-family: 'Sree Krushnadevaraya';text-align:center; letter-spacing: 3px;}
</style>
<div class="cajaentera">
<div class="Titulo">RELACIONES DE FULANITO</div>
<div style="border-bottom: 4px solid #890000;"></div>
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/a02a5e65c6abc4fd802245fdba95ff88/tumblr_onn2mq1T4l1ro0ctvo1_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
<div class="cajalegend">[color=#5C0101]Civiles[/color] - [color=#B8B8B8]Luciernagas[/color] - [color=#0A4D00]Militares[/color] - [color=#455459]Saqueadores[/color] - [color=#A82700]Sectarios[/color] - [color=#B8A007]Viejo gobierno[/color] - [color=#6EB3CC]Nuevo gobierno[/color] - [color=#C70808]Inmunes[/color]</div>
<div class="titurelas">[u]RELACIONES AMISTOSAS[/u]</div>
[b]Amigos de la infancia[/b]
[i]"Nos conocemos desde niños y nos hemos criado juntos"[/i]
-
-
[b]Amigos de conveniencia[/b]
[i]"Cuando me interesa eres mi amigo y cuando no, no."[/i]
-
-
[b]Amigos de copas[/b]
[i]"Con quien tomo algo. No solemos vernos fuera del local"[/i]
-
-
[b]Conocidos[/b]
[i]"Apenas nos conocemos"[/i]
-
-
<div class="titurelas">[u]RELACIONES ROMÁNTICAS[/u]</div>
[b]Amigos con derechos[/b]
[i]"Solo somos buenos amigos pero sabemos divertirnos juntos"[/i]
-
-
[b]Amor plátonico[/b]
[i]"Se que es imposible que estemos juntos pero me encantas"[/i]
-
-
[b]Lio de una noche[/b]
[i]"Probablemente no se vuelva a repetir"[/i]
-
-
<div class="titurelas">[u]RELACIONES HOSTILES[/u]</div>
[b]Enemigos[/b]
[i]"No nos aguantamos ni hacemos nada por disimularlo"[/i]
-
-
<div class="Titulo">RELACIONES IMPORTANTES</div>
<div style="border-bottom: 4px solid #890000;"></div>
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/a87667303e61ce96720122caaf3e1827/tumblr_oq5ux28o1R1ukxfh9o2_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
-------
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/ef266f065e63b82276bbc3e1b91aba8f/tumblr_oqmpma6P7g1t00bifo5_r1_500.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
----------
<div class="cajainfo"><div class="imagen"><img src="https://78.media.tumblr.com/03d2d8a0df653b54b98c2276cc010318/tumblr_p260qeater1qkjtwuo2_1280.gif" width="500px"><div class="informacion">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eleifend neque ut ligula pellentesque, quis rutrum tellus commodo. Quisque eu purus ac quam feugiat accumsan et et erat. Sed feugiat enim vitae augue mattis, lobortis bibendum velit tincidunt. Mauris non ultricies quam. Pellentesque luctus eget turpis eu ornare. Duis accumsan turpis ut mi volutpat pulvinar. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat. Aenean ac hendrerit turpis. Vestibulum eu dictum elit, sed lacinia sem. Aenean vehicula ornare maximus. Sed tincidunt fermentum odio, et blandit odio. Donec ut cursus velit. Vestibulum porttitor fringilla sapien, efficitur posuere nisl tempus ac. Donec a ullamcorper dui, eu porttitor velit. Aliquam erat volutpat.</div>
</div>
</div>
</div>
¡Gracias de antemano!