CSS Transition with Border Radius and Linear Gradient

问题:

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

回答1:

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