Question 43637 in Html Question posted in
Some basic documentation can be found here.

CSS: Background animation on link hover – Html

I want to add an hover effect to my links like this one: https://codyhouse.co/ds/components/app/related-articles

I’m using the following CSS code for that:

a.headline h3:hover {
    background-size: 100% 100%;
}
a.headline h3 {
    color: $body-color;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent 50%, rgb(228, 227, 255));
    background-size: 0% 100%;
    will-change: background-size;
    transition: background-size 0.3s ease-in-out;
}

Unfortunately the result is not the same as in the example.
Is there some kind of JS code or is there an error in my CSS?

Here’s a working demo: https://codepen.io/cray_code/pen/poOQJjX

Tags:

2

Answers


  1. 0

    In the example, it is done the opposite. The a nested in the h3. This works because a is inline by default. You can fix this with your structure by setting h3 to display: inline;.

    a.headline {
  max-width: 200px;
  display: block;
  color: #000;
  text-decoration: none;
  line-height: 1.5;
  font-family: Arial;
  margin: 2rem auto;
}

a.headline h3:hover {
  background-size: 100% 100%;
}

a.headline h3 {
  display: inline;
  color: $body-color;
  background-repeat: no-repeat;
  background-image: linear-gradient(transparent 50%, rgb(228, 227, 255));
  background-size: 0% 100%;
  will-change: background-size;
  transition: background-size 0.3s ease-in-out;
}
    <a href="#" class="headline">
  <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit </h3>
</a>
    Login or Signup to reply.
  2. 0

    Try this:

    a.headline {
    color: var(--color-contrast-higher);
    text-decoration: underline;
    background-repeat: no-repeat;
    background-image: linear-gradient(transparent 50%,hsla(250,84%,54%,0.2) 50%);
    background-size: 0% 100%;
    will-change: background-size;
    transition: background-size .3s ease-in-out;
}

a.headline:hover {
    background-size: 100% 100%;
}
    <h3>
    <a href="#" class="headline">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </a>
</h3>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search