SOLVED: Adding link to image breaks transition settings

Bugs
1

Bricks Version: 1.5.2
Browser: Chrome
OS: Windows

When you have an image, and add a link to it, the transition gets lost.
It still changes to the set hoverstate, just without the transition.

Removing the link makes the transition work again.
(Thought I went mad)

Solved it for now by:

  • Adding a div wrapper to the image.
    – Setting transition on the DIV.
    – Setting brightness on hover on the DIV.
    — Adding link to the image.

Works for now, but still an unwanted div wrapper needed → Bug report.

2 Likes
2

Hi Michael,
Thanks so much for your report!

Unfortunately, I cannot reproduce the issue. Am I’m missing something?

Best regards,
timmse

3

I just set up a page with some nice images, testing it and it works.
Had been working on this thing for more than hours.

So dived deeper, I had my original picture set to HTML TAG ‘picture’.
And then it breaks.

Made you a screencast so you don’t have to.

4

That’s pretty strange because it works for me (canvas & frontend).

You can check the css styles in the builder with the dev tools, maybe you will see where the problem comes from or where styles are missing. Does the problem also occur in the frontend?

5

Ok, I found the problem. It is not in the picture tag (the problem occurs with every tag + link).

The problem arises because the transition is on the root element (the picture, div, whatever tag), but the CSS filter is on the img and not the root, and in between, there is still the link (that has no transition). Accordingly, the transition can not work.

To fix the problem in the meantime, you can add this custom CSS to the image:

root a {
  transition: inherit;
}

We’ll improve this soon.

Best regards,
timmse

3 Likes
6

I think you solved this the right way. For accessibility reasons, you should not place a link directly on an image. Screen readers can’t handle that. The div wrapper is exactly the solution for that.

1 Like
7

Hey that’s new to me.
W3C states that as long as the alt text explains the image, it’s WCAG approved. But I’m by no means an expert here. But you state that an image link is always wrong if the link is not on the wrapper?

https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/H30.html

2 Likes
8

Thanks for looking into it!

9

No, of course not. It’s just a so called best practice. If you publish your image without div wrapper, you take away many possibilities of manipulation, which you have with a div with CSS. But of course it’s not wrong. As always, it is important that you know why you do what you do.

10

Alright thanks for clarifying!

1 Like
11

Hi Michael,
We’ve fixed this bug in Bricks 1.5.4, now available as a one-click update within your WordPress Dashboard.

Please let us know if you are still experiencing issues.

Best regards,
timmse

12

Works perfectly in 1.5.4 Timmse!

Smiling applause :wink: