RubyRube RubyRube - 1 year ago 61
CSS Question

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

Answer Source

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);
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download