CSS Hover Thumbnail Images

Here is a quick and fairly common CSS interview question that seems to come up in technical white boarding sessions. I’ve been asked this question in a front end developer technical interview for a large, well known Silicon Valley social media company. I think the reason this is a popular interview question is that it is relatively quick, can be done on a whiteboard, and involves several CSS3 tricks and knowledge to accomplish something that was historically implemented using JavaScript.

In order to solve this (with purely HTML/CSS only), we need to know CSS pseudo-selectors, sibling selectors, strategic HTML structure, CSS positioning, the box model, and it’s a good way for an interviewer to see a potential candidate’s HTML tag usage and why.

The interviewer may give you functional requirements, such as:
1.) Build a web app displaying three thumbnail images positioned vertically one over the other.
2.) On hover on a thumbnail image, it will display the image full sized in a container to the right of the thumbnails.
3.) Use only HTML and CSS to accomplish this.

Then they may show you a screenshot of the expected final result, and ask you to code out the HTML and CSS all yourself. Something like:

Here is one potential way to construct the HTML:

<section>
<aside>
<ul>
<li>
<img class="thumb" src="/wp-content/uploads/2018/08/mtbaker_climb1.jpg" alt="Thumbnail Image 1" />
<img class="full" src="/wp-content/uploads/2018/08/mtbaker_climb1.jpg" alt="Full Sized Image 1" />
</li>

<li>
<img class="thumb" src="/wp-content/uploads/2018/08/mtbaker_climb2.jpg" alt="Thumbnail Image 2" />
<img class="full" src="/wp-content/uploads/2018/08/mtbaker_climb2.jpg" alt="Full Sized Image 2" />
</li>

<li>
<img class="thumb" src="/wp-content/uploads/2018/08/mtbaker_climb3.jpg" alt="Thumbnail Image 3" />
<img class="full" src="/wp-content/uploads/2018/08/mtbaker_climb3.jpg" alt="Full Sized Image 3" />
</li>
</ul>
</aside>
</section>


We basically just have a section tag as the container, an aside tag for the thumbnail list, and an un-ordered list for the thumbnails themselves. The tricky part of this question, however, is where to place the full sized images. If we choose to place them as direct siblings of the thumbnails, as in the code above, then we can select them with CSS3 sibling selectors. You’ll see soon why this is important.

Now, let’s add in some CSS:

section {
position: relative;
border: 1px solid #ccc;
width: 410px;
}

aside {
width: 105px;
border-right: 1px solid #ccc;
}

ul {
list-style-type: none;
padding-left: 20px;
}

ul li {
margin-top: 10px;
cursor: pointer;
}

ul li:first-child {
margin-top: 0;
}

.thumb {
height: 50px;
}

.full {
display: none;
height: 175px;
position: absolute;
right: 20px;
top: 20px;
}

.thumb:hover + .full {
display: block;
}


Let’s run through the CSS rules. First, we have the section container positioned relative, this is important as we’ll see. I’ve added a border and width to give it some structure as well.
Next, we’re just adding a bunch of style rules to give the overall app some aesthetics. The main trick here are the CSS rules applying to the full sized image:

First, it’s positioned absolute, this way we can move it over to the right of the aside container by setting it’s right side position. Since our section container is positioned relative, any absolute positioned elements within it will be positioned relative to the section tag. We’re also positioning it 20px from the top border to make it look more aesthetically pleasing. Next we’re using the CSS3 hover pseudo-selector and sibling selector to accomplish the hover functionality. So what’s happening in that last selector?

Basically, it translates to this: when the thumbnail image is hovered over, select the immediate next sibling with class of “full”, and set it to a block display (so it is visible). This means when the thumbnail is then no longer hovered over, the “full” image will go back to displayed none and disappear.

You should now see something like the below:

You can see a pen of this here.