Chrome Tab Hover Card Images
Tags: chrome, tips, tutorial, productivity
Published: 2020-04-07 11:14:27

---
title: Chrome Tab Hover Card Images
published: true
description: description area in Twitter cards and open graph cards
tags: chrome, tips, tutorial, productivity

cover_image: https://dev-to-uploads.s3.amazonaws.com/i/iglghdea2xed69m443x2.gif
---

## You can see a preview of the page by hovering on its tab.

![Chrome Tab Hover Card Images - preview](https://res.cloudinary.com/dimshik/image/upload/v1586119437/dev.to/Chrome_Tab_Hover_Card_Images/cover_image.png)


#### Yes, you read it correctly.

This is the thing you didn't know you always wanted.

If you are like me and have at least 34 tabs open at any given time, you probably find it somewhat challenging to navigate between them. 
About a year ago, Google added a new experimental feature (flag) to Chrome that shows an image preview of a site when you hover its tab. These **"Tab Hover Card Images"** are similar to how Microsoft implements them in the Edge browser on Windows 10.
This functionality is pretty stable now, and I have been using it for about half a year already.

So let's get straight to the tutorial because I know you want it.

First, enable the cards

* Fire up Chrome
* Type `"chrome://flags"` into the  address bar, then press the `"Enter"` key
* type `"Tab Hover Cards"` in the search bar

Or you can enter the following command 
[chrome://flags/#tab-hover-cards](chrome://flags/#tab-hover-cards)
in the address bar of the browser and hit `"Enter"`. 

![chrome address bar with tab-hover-cards flag command](https://res.cloudinary.com/dimshik/image/upload/v1586117494/dev.to/Chrome_Tab_Hover_Card_Images/command_in_the_address_bar_1.png)

Here we have our flag setting.

![chrome flag - tab hover card default](https://res.cloudinary.com/dimshik/image/upload/v1586117493/dev.to/Chrome_Tab_Hover_Card_Images/cards_default.png)

From the drop-down menu, a list appears on the right side of the screen and choose either `Enabled` to turn it on or `Disable` to turn it off.

![chrome flag - tab hover card enabled](https://res.cloudinary.com/dimshik/image/upload/v1586117493/dev.to/Chrome_Tab_Hover_Card_Images/cards_enabled.png)

You might wonder what those `"Enabled B"` and `"Enabled C"` options. They are in charge of the time it takes for the card to appear after hovering the pointer over the tab.

If you decide to use only this flag, It will look something like this.

![chrome flag - tab hover card preview](https://res.cloudinary.com/dimshik/image/upload/v1586117493/dev.to/Chrome_Tab_Hover_Card_Images/card_preview.png)

But we are here for the cool stuff, so let's add the image preview as well.

enter the following command 
[chrome://flags/#tab-hover-card-images](chrome://flags/#tab-hover-card-images)
in the address bar of the browser and hit `"Enter". 

![chrome address bar with tab-hover-cards-images flag command](https://res.cloudinary.com/dimshik/image/upload/v1586117494/dev.to/Chrome_Tab_Hover_Card_Images/command_in_the_address_bar_2.png)

Here we have our flag setting again.

![chrome flag - tab hover card images default](https://res.cloudinary.com/dimshik/image/upload/v1586117493/dev.to/Chrome_Tab_Hover_Card_Images/images_default.png)

From the drop-down menu, a list appears on the right side of the screen and choose either `Enabled` to turn it on or `Disable` to turn it off.

![chrome flag - tab hover card images enabled](https://res.cloudinary.com/dimshik/image/upload/v1586117493/dev.to/Chrome_Tab_Hover_Card_Images/images_enabled.png)

Finally, tap on the `"Relaunch"` button to reopen the Chrome browser.

And here we have it, a preview of every tab we have in a hover of a mouse.

![tab hover card images preview](https://res.cloudinary.com/dimshik/image/upload/e_loop/v1586254624/dev.to/Chrome_Tab_Hover_Card_Images/image_preview_animated.gif)

* The current tab will not show a preview image in Tab Hover Cards since it is already showing in the browser window.