[SOLUCIONADO] Adaptar el hover con texto deslizante en Wordpress

gerard094 · #1 (**permalink**) 28/11/2013, 12:34

Buenas tardes, estoy realizando mi sitio en WP, y quiero aplicar el efecto de texto deslizante al posarse sobre imagen, es este:

http://designshack.net/tutorialexamp...fects/Ex3.html

Me facilitan todo el codigo para hacerlo, el cual es este:

Código:

HTML


< div id="ex4" >
<img src="http:../imagen1.jpg">
<p>Some Text</p>
</div>

Código:

CSS


#ex4 {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent; font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#ex4:hover {
line-height: 133px;
color: #575858;
}
#ex4 img{ float: left;
margin: 0 15px;
}

Pero aún así no logro resultados, lo que estoy haciendo es lo siguiente:
Tengo mi imagen a usar en el index del sitio, coloqué el siguiente codigo para establecer un div con la imagen y el texto a usar:

Código:

< div id="fluid" >
<img src="http://localhost/shersy/wp-content/uploads/2013/11/fluid.png">
<p>Teexto</p>
</div>

Y luego en el style.css de mi tema hijo, coloqué el CSS así:

Código:

#fluid {
width: 730px;
height: 133px;
line-height: 0px;
color: transparent; font-size: 50px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
text-transform: uppercase;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#fluid:hover {
line-height: 133px;
color: #575858;
}
#fluid img{ float: left;
margin: 0 15px;
}

Pero al posar el mouse encima no hay resultado alguno, también intenté otras cosas como usar la clase directa de la imagen en vez del div #fluid, pero nada.
Lo que sí pude hacer es que aparezca un texto al azar al haber colocado como div, una de las div mayores, la cual era: "article id=post-2"

No sé que será que estoy haciendo mal, estoy trabajando en local así que les dejo el codigo que tengo:

Código:

<html lang="es-ES" debug="true">
<head>
<style type="text/css" id="stylebot-css">
<body class="home page page-id-2 page-template-default logged-in admin-bar cc-responsive customize-support" style="">
<div class="container-full-width" id="navigation_menu">
<div class="container-full-width" id="sub_body">
<div class="container-full-width" id="header_section">
<div class="container-full-width" id="slider_lite_section">
<div class="container-full-width" id="page_section_section">
<div class="container">
<div class="container-fluid">
<div id="container" class="row-fluid">
<div id="content" class=" span12">
<article id="post-2" class="post-2 page type-page status-publish hentry">
<header class="entry-header">
<h1 class="entry-title"/>
</header>
<div class="entry-summary">
<div id="fluid">
<img src="http://localhost/shersy/wp-content/uploads/2013/11/fluid.png"/>
<p/>
<p>Diseño Fluido</p>
</div>
</div>
<footer class="entry-meta">

pzin · #2 (**permalink**) 28/11/2013, 17:26

Pues el código de por si funciona bien.

¿Lo tienes subido a algún sitio para comprobarlo?

gerard094 · #3 (**permalink**) 29/11/2013, 06:15

Lo he hecho funcionar aunque no sé donde está el error

Así quedo el css y el html

Cita:

#fluid {
width: 400px;
height: 200px;
line-height: 0px;
color: transparent; font-size: 25px;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 300;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#fluid:hover {
line-height: 133px;
color: #575858;
}
#fluid img{
float: left;
margin: 0 15px;
}
#fluid p {
padding-left: 100px;
}

Cita:

<div id="fluid">
<img src="http://localhost/shersy/wp-content/uploads/2013/11/fluid.png">
<p>Diseños Fluidos</p>
</div>