How to get background effects on rounded elements?

IanLunn / Hover

A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS, Sass, and LESS.

http://ianlunn.github.io/Hover/

Other

29.2k stars 5.79k forks source link

How to get background effects on rounded elements? #149

Closed pkiula closed 4 years ago

pkiula commented 5 years ago

Hello. Love this script, but would love to make this work with icons in circles. Here's my CodePen: https://codepen.io/pkiula/pen/gNYLYO

The background fill with hvr-bounce-to-right is forcing itself to be blue and square. How could I control the color and the roundedness? Thanks!

IanLunn commented 4 years ago

Set overflow: hidden on the element it's being applied to then change the styles via the :before pseudo-element: https://codepen.io/IanLunn/pen/xxKvYxe