CSS in Chrome does not work correctly

Navigation
0

I'm programming in PHP, HTML and Javascript to create an online store, integrated in the Opencart platform. Everything is already working properly, minus a small detail with CSS. I put the hover effect on the image of the different products simply using image a:hover . However, although it works in all browsers, on some pages of the site in Chrome, the effect does not run! 

.box-product .image {
    /**display: inline-block;
    margin-bottom: 15px;
    margin-left: 20px;
    display: block;
    max-width: 100%;
    height: auto;**/
    margin-bottom: 22px;
    padding-bottom: 15px;
    display: block;
    text-align: center;
    background: white;
    /**box-shadow: 0px 0px 3px #AAA inset**/
    border: 0px solid white;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.box-product .image img {
    padding: 3px;
    border: 0px solid #E7E7E7;
    display: block;
    max-width: 100%;
    height: auto;
    margin:auto;

}

.box-product .image a:hover {
    opacity:0.5; filter:alpha(opacity=50);    
}
    
asked by anonymous 05.01.2015 / 13:14

1 answer

1

I tested it here and it worked, however it may be error related to your html and not exactly to your css.

Another possibility of not working is that according to W3C, the css opacity property only works from version 4 of google chrome. See link

If it still does not work, post your HTML code.

Anyway, I leave the posted example that worked here. 

.box-product .image a:hover {
    opacity: 0.5;
    filter: Alpha(opacity=50); /* IE8 and earlier */
    }
<div class="box-product">
<div class="image">
<a href="#">
<img src="https://www.w3schools.com/images/compatible_chrome.gif"alt="Smiley face"/></a>
</div>
    
02.03.2017 / 00:50
How to save only two information Dialog does not open