[Consulta]Showroom de imagenes con efecto

[luzzifer]

Hola, bueno tengo una consulta observo un sitio web de argentina que tiene un efecto muy particular, cuando el cursor del mouse pasa sobre las imagenes de los autos, tienenden a destacarse cuando el cursor queda sobre la imagen.
Me gustaria imitar ese efecto estilo sombra, y a la ves lograr que la imagen esa sea un link.
Tal cual esta en esa pagina.


Acontinuacion el enlace para que observen de lo que hablo.
Showroom | Avant Peugeot Concesionaria

[Triby]

Ese efecto se logra con CSS y/o tal vez algo de Javascript, muevo tu tema a CSS desde Fotografía.

[C2am]

Lo que hace que se vea gris o más tenue es la propiedad opacity:

Código CSS:

#modelo_partner_furgon {
    background-image: url(../imagenes/modelo_partner_furgon.jpg);
    opacity:0.4;
    filter:alpha(opacity=40);
}
 

Luego, con un :hover le asigna un valor de 1 a esa propiedad.

Código CSS:

#modelo_partner_furgon:hover {
    background-image: url(../imagenes/modelo_partner_furgon.jpg);
    opacity:1;
    filter:alpha(opacity=100);
}
 

Saludos

[luzzifer]

Hola muchisimas gracias por la ayuda.
C2am gracias por ayudarme, estoy queriendo seguir los pasos que me decis. me dirias que debo hacer?
Las imagenes yo las linkie en un html osea en un post echo con joomla y estan en mi mismo hosting, como logro ese efecto justo a la carpeta de esas imagenes o solo al articulo, o solo a un scrip.
¿En todo caso deberia modificar el template.css de mi template?

[C2am]

Sí solamente es para esas imagenes en particular deberías aplicarle una clase a esas imagenes:

Código PHP:

<img src="http://blabla"  class="efecto" />
 

O aplicarlo al contenedor

Código PHP:

<div   class="efecto"><img src="http://blabla" /></div>
 

Y en el css lo que puse más arriba, sin tener en cuenta lo del background.

Ahora si quieres que se aplique a todas las imagenes de todos los post, busca en el css donde están la clases que aplican a las imagenes dentro del post y modifica allí, aplicando el opacity.

No uso joomla, pero con las herramientas de desarrollo de los navegadores podrás encontrar exactamente cual es el estilo a modificar.

Si tienes un enlace publicalo y te digo donde está

Saludos

[luzzifer]

Hola C2am muchas gracias.
ahora para entender bien asi lo hago sin errores.
tengo que insertar este codigo .css dentro de mi template.css?

Código CSS:

#modelo_partner_furgon {
        background-image: url(../imagenes/modelo_partner_furgon.jpg);
        opacity:0.4;
        filter:alpha(opacity=40);
    }
 

Y ESTE TAMBIEN

Código CSS:

#modelo_partner_furgon:hover {
        background-image: url(../imagenes/modelo_partner_furgon.jpg);
        opacity:1;
        filter:alpha(opacity=100);
    }
 

Y este codigo solo funcionaria para la imagen /modelo_partner_furgon.jpg?


Yo tengo dentro de una carpeta todas esas imagenes miniaturas, pero estaria bueno que solo tenga que poner en un link el subfijo class="efecto"

Como creo el class="efecto" ese que quiero lograr para poder linkear las imagenes con ese efecto opacity.
Gracias por la ayuda me interesaria lograr esto.

[C2am]

No es tan así.
#modelo_partner_furgon hace referencia a un div con id="modelo_partner_furgon"

Código HTML:

<div id="modelo_partner_furgon">....</div>
 

, que dudo que tengas en tu web, por lo cual no puedes solo copiar y pegar.

A las imagenes dentro de tu contenedor le aplicas el opacity, ya sea mediante el id (#) como hacen en la web de ejemplo (pero que termina repitiendo estilos), o con una clase (.clase) para poder aplicar el mismo estilo en diferentes imagenes, y no tener que repetir.


Suponiendo, porque no has mostrado el código que estas usando, o en su defecto un enlace para ver donde lo quieres aplicar, que tienes

Código HTML:

<div id="post1"><img src=tuimagen1.jpg/> + texto </div>
 

Deberías modificar, una alternativa, así

Código HTML:

<div id="post1" class="efecto"><img src=tuimagen1.jpg/> + texto </div>
 

y luego en el css

Código CSS:

.efecto img{ opacity:0.4}
.efecto img:hover{ opacity:1}
 

En este caso no le puse el filter que sirve para IE, no te olvides de agregarlo.

De esta forma todas las imágenes que estén contenidas en un contenedor que tenga asignada la clase "efecto" se verán tal como deseas.

En resumen, debes adaptarlo a tu web.

[luzzifer]

Hola C2am Muchisimas gracias!!

Lo que hice en los pasos siguientes:
Ingrese a mi carpeta templates/template/css/layout.css y agregue la siguiente linea en "main"

Código CSS:

.efecto img{ opacity:0.4}
    .efecto img:hover{ opacity:1}
 

Luego en los articulos donde quiero que las imagenes tengan ese efecto lo logro
con este codigo puesto en html:

Código HTML:

<div id="post1" class="efecto"><img src=tuimagen1.jpg/> + texto </div>
 

Pregunta:
¿Como logro que esa imagen se convierta en link? he intenado convertirla en link a esa imagen con efecto atraves de html y no he podido.
Por que cuando actualizo la pagina, se pierde la imagen osea que rompo el codigo.

[C2am]

Metiendo la imagen dentro de un enlace

Código HTML:

<a href="blbbla.html"><img src="tuimg.jpg" /></a>
 

Saludos

[luzzifer]

Muchas gracias C2am