[Resolved] CSS grayscale effect no longer applies when images treated as links

Home Forums Support CSS grayscale effect no longer applies when images treated as links

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1502172
    NBC

    I’ve built a grid of client logos that runs four columns wide by four rows deep. Here’s an example of one row:

    <div class="grid-25 tablet-grid-25 mobile-grid-100 first-column">
    <img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
    </div>
    
    <div class="grid-25 tablet-grid-25 mobile-grid-100 second-column">
    <img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
    </div>
    
    <div class="grid-25 tablet-grid-25 mobile-grid-100 third-column">
    <img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
    </div>
    
    <div class="grid-25 tablet-grid-25 mobile-grid-100 fourth-column">
    <img src="[LINK TO LOGO FILE]" alt="[ALT TEXT]" style="width="400" class="logo"></a>
    </div>
    

    The class “logo” applies CSS to make the image appear in grayscale unless your cursor hovers over it:

    img.logo {
    	margin: 15px;
    	-webkit-filter: grayscale(100%) !important;
    	filter: grayscale(100%) !important;
    }
    
    img.logo:hover {
    	-webkit-filter: grayscale(0) !important;
    	filter: grayscale(0) !important;
    }

    When I first built this page, none of the client sites were built so I did not treat the logos as links to the respective client sites. I’m gradually making headway with that and wanted to start adding the links.

    When I treat the logos as links, however, the “logo” class no longer applies. The images just appear in color.

    Is there any way to preserve the “logo” class hover effect and still make these images serve as links?

    #1502227
    David
    Staff
    Customer Support

    Hi there,

    can you add a link to one of the images so we can take a look?

    #1502673
    NBC

    I put the link, and temporary log-in credentials, in the “Private information” area. I’ll add it again.

    Note that I have deleted the links from the images at present because they interfere with the grayscale effect.

    #1503213
    David
    Staff
    Customer Support

    Are you able to put a link on one of the images ? So i can see what CSS is required

    #1503709
    NBC

    Tried it again, and this time, it’s working.

    In the immortal words of the late Gilda Radner, “Never mind.”

    #1503911
    David
    Staff
    Customer Support

    Haha – glad to hear you got it working 🙂

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.