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
– DaniP, Commented Apr 7, 2017 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 codepen.io/anon/pen/qrzaay — DaniP
– DaniP, Commented Apr 7, 2017 at 14:49
Good idea. Let me know if you have any ideas for the clipping issue — scottmgerstl
– scottmgerstl, Commented Apr 7, 2017 at 14:50

Community · Accepted Answer · 2017-05-23 12:02:11Z

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.}

edited May 23, 2017 at 12:02

CommunityBot

11 silver badge

answered Apr 7, 2017 at 15:20

DaniP

38.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CSS Transition with Border Radius and Linear Gradient

1 Answer 1

Codepen Demo

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related