Free codes to make beautiful thumbnails to preview stuff.

Category: Thumbnail

A thumbnails is usually a box with an images, used to show a short preview of a post, page, product and etc. When it is clicked, a new page or a popup is openThumbnails are used to list posts, products, videos and different sides of a web site. They are usually consist of an image combined with a text. Various effects are available for the thumbnails to make them more interesting. See below.ed to show more details about the selected topic.

 Home  Help 

Image thumbnail splits on hover and the texts become visible.

Thumbnail Split on Hover

Image thumbnail splits on hover and the texts become visible.

A thumbnail with social sharing buttons and title box, which fades in and out on hover.

Thumbnail with Social Buttons

A thumbnail with social sharing buttons and title box, which fades in and out on hover.

Thumbnail examples with various sizes and hover effect.

Thumbnail with Various Sizes

Thumbnail examples with various sizes and hover effect.

Thumbnail with effect on mouse hovering.

Thumbnail with Hover Effect

Thumbnail with effect on mouse hovering.



Responsive video thumbnail for Youtube with player.

Responsive YouTube Video Thumbnail

Responsive video thumbnail for Youtube with player.

Thumbnail with a layer for its caption and effect.

Thumbnail with Caption Layer

Thumbnail with a layer for its caption and effect.

Various zoom effects for thumbnails. First part.

Zoom Effects for Thumbnails - Part A

Various zoom effects for thumbnails. First part.

Various zoom effects for thumbnails. Second Part.

Zoom Effects for Thumbnails - Part B

Various zoom effects for thumbnails. Second Part.

Rounded circular thumbnail with effects for openning and closing.

Rounded Thumbnail with Opening and Closing . . .

Rounded circular thumbnail with effects for openning and closing.

Thumbnail with two sides for text and image with fading effect.

Double-faced Thumbnail with Fade Effect

Thumbnail with two sides for text and image with fading effect.

Thumbnails with hover effect and refresh button to change thumbnails color with Bootstrap.

Thumbnails with Hover Effect and Refresh . . .

Thumbnails with hover effect and refresh button to change thumbnails color with Bootstrap.

An automatic slider that also allows you to flip through the slides manually and comes with a Thumbnail On Hover.

Slider with Thumbnail Navigation On hover

An automatic slider that also allows you to flip through the slides manually and comes with a Thumbnail On Hover.

There is a grid of 9 photos that also has a thumbnail effect in Hover mode, which shows slightly larger photos in hover mode.

Pure Css Thumbnail Effect

There is a grid of 9 photos that also has a thumbnail effect in Hover mode, which shows slightly larger photos in hover mode.

A pure thumbnail css is overlaid with the color, which fades in hover mode and the image is zoomed.

Pure CSS Picture Grid Color Overlay Zoom . . .

A pure thumbnail css is overlaid with the color, which fades in hover mode and the image is zoomed.

In this code, we have a number of small images that are displayed in slide mode in different parts of the text. This text has a blue background that covers . . .

HTML Thumbnails with with Hovering Text . . .

In this code, we have a number of small images that are displayed in slide mode in different parts of the text. This text has a blue background that covers . . .

Transitions can make your website photos more beautiful. In this code, we also have a text with a gray background, which in the hover mode, this background . . .

Sliding Thumbnail Image on Mouse Hover

Transitions can make your website photos more beautiful. In this code, we also have a text with a gray background, which in the hover mode, this background . . .

In this code, we have a number of thumbnails that have an effect in hover mode. These effects, along with a relatively clear background, display a text . . .

Multiple Effects for HTML Thumbnails

In this code, we have a number of thumbnails that have an effect in hover mode. These effects, along with a relatively clear background, display a text . . .

In this code, the thumbnails have a radius border, and in hover mode the images become smaller and a border is displayed at the top and bottom, in this . . .

HTML Thumbnail with Hover Effect

In this code, the thumbnails have a radius border, and in hover mode the images become smaller and a border is displayed at the top and bottom, in this . . .

In this code, the thumbnail shows the title and buttons in the hover time. In addition, the image is displayed in the original color during the hover.

CSS Thumbnail with Text Zoom Effect on Hover

In this code, the thumbnail shows the title and buttons in the hover time. In addition, the image is displayed in the original color during the hover.

In this post, we have thumbnails. These images are circular and are square and larger at the time of hover. Color images are also displayed during hover . . .

Pure CSS Thumbnai Code with Image Zoom in

In this post, we have thumbnails. These images are circular and are square and larger at the time of hover. Color images are also displayed during hover . . .

The thumbnails in this code have a circular appearance. Each image is covered in green at the time of Hover and a short title is written on it.

Circular Thumbnail Code with Caption on . . .

The thumbnails in this code have a circular appearance. Each image is covered in green at the time of Hover and a short title is written on it.

In this beautiful thumbnail, there is normally only the shadow of the image. In hover mode, the image rotates at the same time as it becomes three-dimensional, . . .

CSS Thumbnail 3D Rotation on Hover

In this beautiful thumbnail, there is normally only the shadow of the image. In hover mode, the image rotates at the same time as it becomes three-dimensional, . . .

In this post, thumbnails have different effects during hover time. But they all have one thing in common, and that is the display of text below the thumbnail . . .

Varios CSS Hover Effects for Thumbnails

In this post, thumbnails have different effects during hover time. But they all have one thing in common, and that is the display of text below the thumbnail . . .

The thumbnails in this post move up and down automatically. These thumbnails have no effect on hover time and are only constantly moving.

HTML Thumbnail Image with Auto Scroll

The thumbnails in this post move up and down automatically. These thumbnails have no effect on hover time and are only constantly moving.

In this post, we have six thumbnails. These images zoom in a bit during the hover and the mouse icon also changes. Clicking on any of the images will . . .

HTML Thumbnail with Image Preview on Click

In this post, we have six thumbnails. These images zoom in a bit during the hover and the mouse icon also changes. Clicking on any of the images will . . .

In this post, we have some thumbnails together. These images disappear during the hover and the title below them is displayed in white with animation.

CSS Thumbnail with Caption Revealing on . . .

In this post, we have some thumbnails together. These images disappear during the hover and the title below them is displayed in white with animation.

By placing the mouse cursor on each of the photos, the photo folds upwards. By removing the mouse, the photo returns to normal.

Folding Thumbnail Image on Hover with Javascript

By placing the mouse cursor on each of the photos, the photo folds upwards. By removing the mouse, the photo returns to normal.

In this post, we have prepared beautiful thumbnail images for you. These thumbnails have a title. This title scrolls slightly up during the hover.

Bootstrap Card Hover Interactions

In this post, we have prepared beautiful thumbnail images for you. These thumbnails have a title. This title scrolls slightly up during the hover.

We have a thumbnail image with the profile photo section and the number of followers and followers in this post. The profile in this thumbnail has a hover . . .

Amazing Profile Thumbnail Card Code

We have a thumbnail image with the profile photo section and the number of followers and followers in this post. The profile in this thumbnail has a hover . . .

What are You Looking for?


Site Logo
  • About us
  • Contact us
  • How to Use?
  • Suggested
Free Frontend
Code Free Tutorial
CSS Free Code
Graphic Photo World


© Kerixa inc. All Rights Reserved.