CSS in Chrome does not work properly

Asked

Viewed 2,049 times

0

I am programming in PHP, HTML and Javascript to create an online store, integrated in the Opencart platform. Everything is already working correctly, except a small detail with CSS. I put the effect hover in the image of the different products simply using image a:hover. However, although it works on all browsers, on some pages of the Chrome site, 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);    
}
css google-chrome

  • http://jigsaw.w3.org/css-validator/

  • .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 a:Hover {opacity:0.5; filter:alpha(opacity=50);}

  • Copying this code in the W3C Validator will give the answer (which has to do with opacity)

  • Could you post html? The image is inside the anchor or outside?

1 answer

1

I tried it here and it worked, but it could be error related to your html and not exactly 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 https://www.w3schools.com/cssref/css3_pr_opacity.asp

If still not working, post your HTML code.

Anyway I leave the example posted 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>

Browser other questions tagged css google-chrome

You are not signed in. Login or sign up in order to post.