Soporte » Temas y plantillas » Una opacidad de 50% en el hover de las imagenes y en el menu

  • Resuelto sanchez1994

    (@sanchez1994)



    Me gustaría saber como pongo una opacidad de 50% en el hover de las imagenes y en el menu de mi página , uso el tema storefront de woomerce.
    Saludos!!

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 9 respuestas - 1 de 9 (de 9 total)
  • Moderador almendron

    (@almendron)

    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!

    Moderador almendron

    (@almendron)

    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!

    Moderador almendron

    (@almendron)

    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

    Moderador almendron

    (@almendron)

    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

    Moderador almendron

    (@almendron)

    De nada. Un saludo.

Viendo 9 respuestas - 1 de 9 (de 9 total)
  • Debes estar registrado para responder a este tema.