Busca el estilo .site-header .site-branding img en la hoja de estilos del tema y añade la propiedad «opacity»: https://www.w3schools.com/css/css_image_transparency.asp
Para el menú, tienes que aplicar dicha propiedad a .sp-designer .storefront-primary-navigation
Gracias por responder, al poner este código :
.site-header .site-branding img
img:hover {
opacity: 0.5;
filter: alpha(opacity=50); /* For IE8 and earlier */
}
me sale como un icono de error en la línea de filter que pone:
expected (<filter-function-list> | none) but found ‘alpha (opacity=50)
Con el primary navigation me pasa igual me pone lo mismo en esa línea a que se debe? gracias por responder ,saludos!
Pues ni idea, De todas formas, quita esa línea. Solo es para IE8 y versiones anteriores.
ok gracias lo tengo puesto asi :
.site-header .site-branding img
img:hover {
opacity: 0.5;
}
.sp-designer .storefront-primary-navigation
img:hover {
opacity: 0.5;
}
no me sale ningun error pero no noto ningun cambio y no se aplica el efecto al hover , a que crees que se podría deber? como dato lo estoy haciendo en añadir css adicional no estaba ese estilo ya escrito en la hoja (o si lo estaba no lo he visto o no se donde se encuentra xd) sorry por las molestias!
El estilo existe y está en la hoja de estilos del tema, pero no es necesario que lo modifiques.
Es mejor añadirlo al CSS adicional. Ahora bien, añade !important a cada propiedad. Por ejemplo:
opacity: 0.5 !important;
Por lo que veo, quieres que ese efecto se produzca cuando pasas el ratón por la imagen o por los enlaces del menú. Si es así, no puedes poner en la regla «img» e «img:hover» porque entonces no se verá nada.
Prueba a poner solo
.site-header .site-branding img:hover {
opacity: 0.5 !important;
}
Yo lo acabo de probar con el inspector y me funciona.
Para el otro elemento, tal cual lo has puesto pero añadiendo !important
Vale ahora al ponerlo noto que la imagen del logo de la página si se nota el efecto al pasar el ratón pero en los enlaces del menu primario y en las imagenes de producto no , supongo que para las de los productos tendría que cambiar lo de .site-header por el apartado que englobe a eso que supongo sera body o algo asi no ?
ahora mismo tengo asi el code :
http://i66.tinypic.com/t6s4r7.png
Para los productos
ul.products li.product img:hover {
opacity: 0.5 !important;
}
Para el menú prueba mejor:
.sp-designer .main-navigation ul li a:hover {
opacity: 0.5 !important;
}
Gracias !! ahora ya si esta justo como quería
