Buenas! Estoy interesado en encontrar este efecto
http://www.deborahvanderschaaf.nl/
lo de que si pasas el ratón por encima de una imagen, ésta se deslice hacia abajo y te muestre el texto.
Por lo visto es un tema de wordpress, pero a mí me gustaría hacerlo sin wordpress, directamente con jquery o con lo que sea, cómo puedo hacer para encontrarlo?
Hola.
Eso se hace directamente con jQuery, es sencillo.
Te creas los divs que necesites, y los pones position relative y overflow hidden. Luego dentro de esos div tendras la imagen que se muestra (en position absolute, y top 0) y el parrafo que quieres mostrar o lo que sea.
Cuando hagas un over, animas la imagen y le pones un top de lo que ocupa de alto el div (para que no se vea y se vea el parrafo) y cuando termine el over, pues vuelves a poner la imagen con top:0px.
Con código sería algo así (supongo que en la página lo harán de forma similar)
<!-- CSS en el head -->
.x {
background-color: blue;
position: relative;
overflow:hidden;
height: 100px;
width: 200px;
float: left; /* Esto sólo si lo tienes dentro de una lista por ejemplo para que salga en linea */
margin: ...;
padding: ...;
}
.x img{
position: absolute;
top:0;
left: 0;
}
.x p{
color: white;
}
<!-- En el Body -->
<div class="x">
<img src='....' /> <!-- para que se vea bien que sea del mismo tamaño que el div.x -->
<p>Texto a mostrar cuando se hace over</p>
<p>Puede ser cualquier cosa.</p>
</div>
Y ahora el javascript sería algo como:
$('.x').hover(function(){
$("img", this).stop().animate({top:'100px'},700);
},
function() {
$("img", this).stop().animate({top:'0px'},700);
}
);
En la web que has puesto, está hecho así, con este código tal cual:
//javascript
jQuery(document).ready(function($){
$(".hover").hover(function(){
this.src = this.src.replace("_off","_on");
}, function(){
this.src = this.src.replace("_on","_off");
});
$('.slidedown').hover(function(){
$("img", this).stop().animate({top:'318px'},{queue:false,duration:500});
//$("img", this).stop().animate({ "opacity": 0 });
}, function() {
$("img", this).stop().animate({top:'0px'},{queue:false,duration:500});
//$("img", this).stop().animate({ "opacity": 1 }, 700);
});
$('.slidedown_work').hover(function(){
$("img", this).stop().animate({top:'250px'},{queue:false,duration:500});
//$("img", this).stop().animate({ "opacity": 0 });
}, function() {
$("img", this).stop().animate({top:'0px'},{queue:false,duration:500});
//$("img", this).stop().animate({ "opacity": 1 }, 700);
});
});
Si te fijas tiene 2 etiquetas <script> en la cabecera, una es del jquery.js, y la otra te lleva a un archivo que contiene esto.
Gracias, os avisaré cuando tenga algo de tiempo para intentar implementarlo que ahora mismo estoy petao xD (a estas horas y todavía me queda -__-)
#8 jquery cuando le dices animate("opacity") hace la traducción para cada explorador si no recuerdo mal. En IE es filter:alpha(opacity=80); si lo quieres hacer en CSS
#9
El opacity solamente funciona en IE, porque hice yo un juego de colores el año pasado y solamente funcionaba con IE.
#10 yo creo que no, ultimamente gasto fadein y fadeout o show y hide, pero vamos, recuerdo haber usado animate('opacity') y funcionaba con todos los navegadores, igual introduciste un error.
