CSS Transition with Border Radius and Linear Gradient

Question

Given my CodePen https://codepen.io/scottmgerstl/pen/MpMeBy this is my image layout in question

<span class="profile-pic-wrapper">
    <a href="https://www.google.com" target="_blank">
        <img class="profile-pic" src="http://i-cdn.phonearena.com/images/article/67689-image/Video-shows-Super-Mario-64-HD-playing-on-the-Apple-iPhone-6.jpg"/>
        <span class="profile-pic-overlay">
            <span class="social-icon">View Profile</span>
        </span>
     </a>
</span>

Description

I am trying to use a CSS transition on a linear gradient (profile-pic-overlay) that is clipped by a border radius (profile-pic-wrapper). The desired behavior is to have a profile image when, the rounded image container is hovered over, a linear gradient fades into view indicating you can view the profile.

The issue

The gradient does not honor the bounds of the border radius. I tried this answer but when I do that, the linear gradient will not transition. @Keyframe animation doesn't help either.

Any ideas?

Edit

This appears to be an issue only with Chrome on Windows

Looks fine to me on Chrome - MAC ... can you include your browser ? — DaniP, Apr 07 '17 at 14:48
A tip change the transition from the `:hover` to the normal state taht way you have the transition on both mouse leave and enter https://codepen.io/anon/pen/qrzaay — DaniP, Apr 07 '17 at 14:49
Good idea. Let me know if you have any ideas for the clipping issue — scottmgerstl, Apr 07 '17 at 14:50

score 1 · Accepted Answer · edited May 23 '17 at 12:02

As far I can test the problem is related to the <a> container of your gradient layer. Searching about how to solve this issue here are some properties you can add that will cover most browsers:

will-change & transform:translate3d

Add this to your code:

.profile-pic-wrapper, .profile-pic-wrapper a {
  display:block;
  -webkit-transform:translate3d(0,0,0);
  transform:translate3d(0,0,0);
  will-change:transform;
}

Codepen Demo

_{Note: Info adapted from this answer, I want to post here my answer to suit your case beacuse you need to do it on a tag and parent tag, but if you want we can close it as dup.}

CSS Transition with Border Radius and Linear Gradient

1 Answers1

Codepen Demo

Linked