Learn how to make a simple panel home page that expands on hover.
In this HTML CSS tutorial we’ll look at a way to create a rather simple but effective design which consists of a large, full-height home page with sections that expand on hover. I saw this effect being created on another tutorial elsewhere and thought it looked quite impressive but there was a lot of JavaScript work going on in the background. Whilst this seem to work OK I thought it was a bit unnecessary and decided to create the same without JavaScript and the result is this HTML CSS tutorial. There’s quite a few simple things which will help you achieve the end result but i’ll break down the steps bit by bit for you. You’ll first learn how the markup is created to define the three sections. This is just basic HTML with some ids and classes applied to them so that we can target each of them individually with CSS. The first thing you’ll learn with the CSS styling is to order the components in a row by using a flexbox container and then set the background images of each section individually. We’ll then move on to styling the text by making it centered in each section on the page. The problem with the images is that they all have differing brightness so you’ll learn a clever trick to apply a filter to the sections to ensure that the background image appears darkened and you can make the text of each section pop out on top of it. The last thing to cover is the expansion of each panel on hover. So in the final section you’ll learn how to add CSS hover rules to make the panels expand when the user hovers over them. This includes adding a nice transition to make the expansion appear smooth and also darken the background filter to really make it stand out. That’s it! It’s a really simple concept but looks really effective. Of course you don’t have to make this span the entire height of your page. It could be something that is a small component of a much larger page.