[SOLUCIONADO] como hacer efecto hover?

[johannes13]

como hacer el efecto hover de las imagenes debajo del banner, o como se llama esa manera de hacerlo y que al hacer hover la imagen del link vaya de izquierda al centro, y como hacer o con que termino buscar el efecto,que al llegar a 2 imagenes el otro div que baja lo hace deslizandose, , gracias por la respuesta que me puedan brindar.

pagina ejemplo
http://luiszuno.com/themes/folder/

[herzbazi]

Iniciado por johannes13

como hacer el efecto hover de las imagenes debajo del banner, o como se llama esa manera de hacerlo y que al hacer hover la imagen del link vaya de izquierda al centro, y como hacer o con que termino buscar el efecto,que al llegar a 2 imagenes el otro div que baja lo hace deslizandose, , gracias por la respuesta que me puedan brindar.

pagina ejemplo
http://luiszuno.com/themes/folder/

mmmm que te dire ahi tienes que usar jquery , html css para poder hacer un banner como ese.

el hover lo haces algo asi

Código CSS:

#img1{
    background-image:url('../img/redes.png');
    background-repeat:no-repeat;
    background-position:0% 0%;
    height: 32px;  /*el alto original de la imagen1*/
    width:  32px;  /*el ancho original de la imagen1*/
}
#img1:hover {
    background-position:0% 100%;
}
 

ahi trabajas con una imagen, y la muestras pon una posicion del background...


en referencia a el movimiento puedes hacerlo con css. o con la propiedad animate de jquery ,,,,,,

espero haberte ayudado.

[johannes13]

Gracias por la respuesta, pero no fui muy claro :( no quiero el efecto exactamente que se enucentra debajo del banner sino debajo del banner incluida las miniaturas, hay 3 columnas en el " cuerpo" donde hay imagenes, cuando hago hover se ve un efecto , a parte de ponerse de color anarajando la imagen, no son 2 imagenes, e visto en el codigo que usa en el css

Código HTML:

.thumb:hover img {
opacity: 0.2;
}

.thumb {
background: #cb5432 url(../img/icon-link.png) center center no-repeat;
}

html

Código HTML:

<a href class="thumb">
  <img src="http://luiszuno.com/themes/folder/img/dummies/featured/02.jpg">
</a> 

pero intento e intento y no me sale :(

[pzin]

Pues ahí lo hacen de tal forma que hay un elemento que contiene una imagen, y al pasar el ratón por encima de ese elemento (no por encima de la imagen) se pone un fondo naranja y una imagen que no se repite (de fondo también) y la imagen baja su opacidad para que el fondo naranja sea visible.