How to Create News Boxes that Show Additional Information on Hover

Fitting blog post titles within a blog post container can be a challenge, especially when headlines have to be longer than normal. When blog titles have different lengths (i.e. two lines of text vs three lines of text), it breaks visual consistency of a blog post grid: 

Before you restrict your content teams to an unrealistic word count for the sake of visuals, give this tutorial a shot!

Whether you're designing a blog page for yourself or for a client, it would be counter-intuitive and time-consuming to arbitrarily cut blog post titles to fit them into a small area. You can control how to display the long blog post titles in a way that doesn't break the visual harmony of the post grid so that no matter how long a blog post title is, it will always fit into the fixed space designated for the title. 

HTML

Our solution below is cutting the blog title text to two lines and display an ellipsis if the text is longer than two lines so if an ellipsis appears, it means there's the blog title is cut off and the user can display the whole title by hovering over the blog post. Take a look at the code below:

We have a container for each individual blog post with classname of thumbnail-container and an overlay on top that covers the entire area. Inside the overlay container, there's an inner-overlay that holds the initial truncated version of the blog title. When we hover over the blog post, the inner-overlay expands to cover the entire overlay area, creating a dark overlay over the image so that the post image takes a backseat and the blog title is clearly visible. 

CSS

Now that we built the structure for the blog post grid, it is time to add CSS to create the hover effects. Here are some important things to pay attention to: 

• We make the image expand to fit the entire blog post container by making its width and height 100% and we give it an object-fit: cover so that the image maintains its aspect ratio. 
• The entire .thumbnail container is made clickable by setting the cursor to pointer. That way regardless of where you click inside a blog post, the truncated blog title will expand on hover.
  We set its position to relative because its child element, the overlay element needs to be absolutely positioned.
• The overlay element position is set to absolute and its background color set to transparent because even though it is there, it will only be made visible on hover. 
• The .title-hover elements hold the truncated version of out blog post titles. We set the overflow property to hidden so that if the blog title is longer than its parent container size, it will get clipped. We use the line-clamp property to limit the number of title lines to two. Any line that exceeds two will be clipped and the ellipsis will be displayed, indicating there are more lines.
• Finally, using the :hover pseudo-class, we create a transparent background for the overlay and set the overflow and line-clamp values to default so that the entire blog title is visible.

There we have it. Check out the JSFiddle below to see how it looks: