CODEWITHSUNDEEP
csssass
RubyRube
RubyRube

Reputation: 602

CSS Animations go too high on hover

I have a Reddit news feed here:

https://codepen.io/Teeke/pen/YxXXaE

Article headlines appear on hover. If the article length text is too long, the headline will go above the viewport, making the first 2-3 words unreadable.

I could decrease the line-height, but I want to solve this differently.

Two options:

1) Make the article text go above and outside the picture, keeping the grey overlay.

2) Make the pop up stop at a certain height: The top text would be readable, but the lower text would be hidden.

What are best practices to do this?

I tried, overflow: hidden; and position: fixed; but neither give a readable result.

CSS:

.overlay{
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 3;
        // text-shadow: 2px 2px 2px #f22;
    }

    .bar, .overlay{
      transition: transform 250ms;
      transform: translateY(80px);
      color: transparent;
    }

    &:hover{
      .bar, .overlay{
        transform: translateY(0);
        color: inherit;
        text-shadow: 2px 2px 2px #222;
         background: linear-gradient(to top, #001, rgba(0,0,0,0.4) 5px);
        padding: 8px;
      }
    }

    &.stickied .overlay{
      background: linear-gradient(to top, #0f0, transparent 80px);
    }

    @media (max-width: 520px){
      width: 100% !important;
    }
  }
}

Upvotes: 0

Views: 85

Answers (3)

Rolands T.
Rolands T.

Reputation: 71

To make overlay go out of container, add overflow: visible; to the class .item

Upvotes: 1

sol
sol

Reputation: 22969

I would go with your second option. I would also suggest these adjustments:

  • Reduce font-size
  • Reduce line-height
  • Remove the letter-spacing
  • Left align the text
  • Create a faded out effect when text overflows

codepen demo

.grid .item .bar {
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100%;
  height: 200px;
  padding: 0 4px;
  z-index: 4;
  color: white;
  display: flex;
}


.grid .item .bar a {
  color: inherit;
  text-decoration: none;
  font-size: 16px;
  /* reduced font size */
  line-height: 1.2;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  text-align: left;
  overflow: hidden;
}

.grid .item .bar a.zoom {
  align-self: flex-end;
  overflow: inherit;
  z-index: 3;
}

.grid .item .bar a:not(.zoom):before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(transparent 175px, #888);
}

Upvotes: 1

Cătălin Costan
Cătălin Costan

Reputation: 93

Firstly, I suggest a smaller font size for the .post text, maybe 14px. A little bit of testing showed that the text was 100% readable.

You might also consider trimming it down if it is too long, using

.post {
   overflow: hidden;
   text-overflow: ellipsis;
}

Upvotes: 2

Related Questions