Skip to content

Commit

Permalink
fix: give zoom transition highest priority
Browse files Browse the repository at this point in the history
**Description**

This makes sure that the opening/closing transitions are triggered even though an image CSS `transition` is provided as inline style.

This is problematic with frameworks that generate inline styles on their
images (e.g. Gatsby).

See full context in #110.

**Solution**

The CSS `transition` is marked as "!important" for the animation to happen
even though it's overriden by another inline `transition` style attribute.

**Related**

Closes #110
  • Loading branch information
francoischalifour committed Dec 7, 2019
1 parent a11e04b commit d19d847
Showing 1 changed file with 10 additions and 1 deletion.
11 changes: 10 additions & 1 deletion src/medium-zoom.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,16 @@
.medium-zoom-image {
cursor: pointer;
cursor: zoom-in;
transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1);
/*
The `transition` is marked as "!important" for the animation to happen
even though it's overriden by another inline `transition` style attribute.
This is problematic with frameworks that generate inline styles on their
images (e.g. Gatsby).
See https://github.com/francoischalifour/medium-zoom/issues/110
*/
transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
}

.medium-zoom-image--hidden {
Expand Down

0 comments on commit d19d847

Please sign in to comment.