Check out my Reddit news feed design:
https://codepen.io/Teeke/pen/YxXXaE
When hovering over articles, the headlines get displayed. But if the article text is too long, part of the headline may go off-screen.
Instead of changing the line-height, I'm looking for alternative solutions to this issue.
I have two ideas:
1) Have the article text extend beyond the image with a grey overlay.
2) Limit the popup height: The top part will be visible while the lower part remains hidden below.
What are the recommended ways to address this problem?
I've experimented with overflow: hidden; and position: fixed; but they didn't produce satisfactory results.
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;
}
}
}