Remove image opacity?

    Affected Version
    WoltLab Suite 3.1

    How can I remove the article list teaser image opacity? I couldn't find the CSS in Inspect Element.

    This CSS looks to cover it.


    Remove the last two entries for Opacity

    Code
    .articleList .articleListImage > img {
    border-radius: 2px;
    opacity: 0.85;
    transition: 0.2s ease opacity;
}
    Quote from PJK

    I couldn't find the CSS in Inspect Element.

    I found it easy using inspect Element with FireFox on another WBB site with Articles listed, simply by mousing over the article image and using inspecting element on it

    Quote from GTB

    I found it easy using inspect Element with FireFox on another WBB site with Articles listed, simply by mousing over the article image and using inspecting element on it

    Except that code doesn't work, at least not in Safari. I don't know why the opacity was added in the first place, it makes the images look really bad.

    You mean that CSS code doesn't remove the opacity for article images?


    It did work on that other WBB site when I disabled the Opacity CSS entries with inspect element to test it out on the article images there

    This is what I added to my Global CSS and SCSS:


    CSS
    .articleList .articleListImage > img {
opacity: none !important;
transition: none !important;
}


    You can see by visiting my site that it isn't working. It should.

    Not sure but don't think you can use NONE as a setting with Opacity (why it doesn't work for you) looking here at the Opacity values allowed. https://www.w3schools.com/cssref/css3_pr_opacity.asp


    I think you need change none to 1 ( 1 is default and means no fading opacity will be used on hover over). You don't need disable the second CCS entry, doesn't matter that if Opacity is set to 1

    CSS
    .articleList .articleListImage > img {
opacity: 1 !important;
}
    Quote from GTB

    Not sure but don't think you can use NONE as a setting with Opacity (why it doesn't work for you) looking here at the Opacity values allowed. https://www.w3schools.com/cssref/css3_pr_opacity.asp


    I think you need change none to 1 ( 1 is default and means no fading opacity will be used on hover over). You don't need disable the second CCS entry, doesn't matter that if Opacity is set to 1

    CSS
    .articleList .articleListImage > img {
opacity: 1 !important;
}

    That was it, thank you. It should be an option somewhere in the ACP.

    Yeah, you tend to think you can use "NONE" for all CSS entries to disable something. But you can't use it for everything with CSS and isn't supported by some things. Best way to check is look at CSS School and it tells you what values can be used, I noticed NONE isn't one of them that can be used with Opacity


    You can only use these with it:


    opacity: number|initial|inherit;