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.25k stars 5.78k forks source link

Add left border reveal and right border reveal #86

Open LJNielsenDk opened 8 years ago

mathielen commented 8 years ago

Check this

@mixin leftline-reveal {
  $duration: $mediumDuration;

  @include hacks();
  position: relative;
  overflow: hidden;

  &:before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 0;
    top: 0;
    height: 100%;
    background: $activeColor;
    width: 4px;
    @include prefixed(transform, translateX(-4px));
    @include prefixed(transition-property, transform);
    @include prefixed(transition-duration, $duration);
    @include prefixed(transition-timing-function, ease-out);
  }

  &:hover,
  &:focus,
  &:active {

    &:before {
      @include prefixed(transform, translateX(0));
    }
  }
}
IanLunn commented 8 years ago

Happy to merge this if anyone can send a pull request for both effects in Sass and LESS formats.

svitlana-galianova commented 6 years ago

Hi, is this still an issue or has it been implemented? If it's still active, I would like to contribute

Hangzhe commented 1 year ago

Hi,

I recently saw that this page has not yet added left and right borders for display. By learning from the previous warehouse content, I have added the hovering of the left and right borders and issued a pull request.

Adding the hovering effect of the left and right borders can be inferred from the previous hovering effect, which is a process of further understanding and learning. I am happy to contribute to it.

I hope my pull request can be approved.