Ayuda con: TUTORIAL 07: EFECTO TITULO EN IMAGEN.

Miér Mar 01, 2017 7:50 pm

Hola, hola.
Tengo un problema con este tutorial, agradecería si revisaran mi code para ver que salió mal ♥

Yellow Smile

MI CODE ESTÁ ASÍ:

Código:: <div class="morado"><img src="http://i.imgur.com/z7VT2jd.png" style="width:100px;"/><div class="rosa">Yellow Smile</div></div> <style>.morado {border: 10px solid #FFC105;} .rosa {width: 100px;height: 100px;padding-top: 50px;position: relative;margin-top: -150px;font-family: times new roman;font-size: 25px;color: #000;line-height: 21px;text-align: center;letter-spacing: -1px;font-style: italic;background: #fff;transition: 0.5s linear;opacity: 0;} .morado:hover .rosa { opacity: 1; transition:0.5s linear; }</style>

Miér Mar 01, 2017 8:36 pm

¡Hola, Skaoi! Revisé tu código y el problema es algo pequeñito. ~
Este es tu código:

Código:: <div class="morado"><img src="http://i.imgur.com/z7VT2jd.png" style="width:100px;"/><div class="rosa">Yellow Smile</div></div><style>.morado {border: 10px solid #FfC105;width: 100px;} .rosa {width: 100px;height: 100px;padding-top: 50px;position: relative;margin-top: -150px;font-family: times new roman;font-size: 25px;color: #000;line-height: 21px;text-align: center;letter-spacing: -1px;font-style: italic;background: #fff;transition: 0.5s linear;opacity: 0;} .morado:hover .rosa { opacity: 1; transition:0.5s linear; }</style>"]

El problema radica que en ".morado" falta la propiedad que controla el ancho del objeto, es decir, el width. Debería verse de esta manera:

Si le agregas esa pequeña cosita tu código se verá precioso. ❤

Jue Mar 02, 2017 12:45 am

Muchísimas gracias ♪