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">