Examples of Thumbnail Hover Effect are everywhere, you must have seen it on almost all websites. Be it in the form of just zoom in or zoom out, or adding beautiful animations, Thumbnail Hover effects are a good and easy way to make your content even more readable and interesting to the customer. Be it for a personal project or for some commercial one, Hover effects are able to make their place everywhere. This time I am gonna share it that is gonna make your project looks sexier and more snappy.

Preview of Angled Thumbnail Hover Effect.

If you liked how this preview works, then look below for the answer on how to create it and customise it.

You may also like.

How Angled Thumbnail Hover Effect works.

Thumbnail Hover Effect

Before sharing the code, let’s talk about how this Hover Effect came into existence. First, we created a container div with the class name of item-grid, then 6 mini div’s according to the number of images we had with the class name of the item. Inside the item div, we have a div for the image with the class name of item-image, then item-text-wrapper which is gonna contain our text. After that we will give our item-grid a fixed width, let’s say of 900px, the overflow will be set to hide in order to not let images appear outside the limit prescribed to them. First, the only image will be visible and text will be hidden. We’ll add a pseudo class for hover and after which will enable us to make text appear during hover then hide after the pointer changes its position. Let’s see the code then.

Source code for Thumbnail Hover Effect.

Here’s our index.html.

HTML.

!DOCTYPE HTML
<HTML>

<HEAD>
	<TITLE>Evil Web Dev | Angled Thumbnail Hover Effect.</TITLE>
	<link rel="stylesheet" href="style.css">
</HEAD>

<BODY>
	<div class="item-grid">
		<div class="item">
			<div class="item-image">
				<img src="https://cdn.dribbble.com/users/1863078/screenshots/4835474/ux_process-sm.jpg" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">UI/UX</p>
					<h2 class="item-text-title">Magna Inceptos Commodo</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2958133-Facebook-in-material-design">Ligula Ridiculus 
                               Tortor</a>
		</div>
		<div class="item">
			<div class="item-image">
				<img src="https://cdn.dribbble.com/users/278549/screenshots/4831219/doc_in_italy_dribbble03-01.png" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">Design</p>
					<h2 class="item-text-title">Ligula Ridiculus Tortor</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2974913-Home">New Stripe Homepage</a>
		</div>
		<div class="item">
			<div class="item-image">
				<img src="https://cdn.dribbble.com/users/2101530/screenshots/4835848/05.png" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">Concept</p>
					<h2 class="item-text-title">Tellus Ipsum</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2974913-Home">NASA</a>
		</div>
		<div class="item">
			<div class="item-image">
				<img 
                         src="https://cdn.dribbble.com/users/1803663/screenshots/4785720/lighthouse_in_cape_neddick__york_800_600.png" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">Illustration</p>
					<h2 class="item-text-title">Mattis Vulputate Elit Vestibulum</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2969126-Some-Icons">Icons</a>
		</div>
		<div class="item">
			<div class="item-image">
				<img src="https://cdn.dribbble.com/users/729829/screenshots/4738104/galshir-storytime.png" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">Design</p>
					<h2 class="item-text-title">Justo Sit</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2961622-IO-Flux-Creative-Exchange">IO Flux</a>
		</div>
		<div class="item">
			<div class="item-image">
				<img src="https://cdn.dribbble.com/users/107759/screenshots/4718965/exo.png" alt="" />
			</div>
			<div class="item-text">
				<div class="item-text-wrapper">
					<p class="item-text-dek">UI/UX</p>
					<h2 class="item-text-title">Tellus Ullamcorper Vehicula</h2>
				</div>
			</div> <a class="item-link" href="https://dribbble.com/shots/2974913-Home">Skilledup : Nav</a>
		</div>
	</div>
</BODY>

</HTML>

and our style.css

CSS

body {
	font-family: "Montserrat", sans-serif;
	background: #202030;
}
.item-grid {
	max-width: 900px;
	margin: 100px auto;
	position: relative;
	box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.3);
	overflow: hidden;
}
.item {
	position: relative;
	float: left;
	width: 33.33333333333%;
	background-color: #128EF3;
	overflow: hidden;
}
.item:after {
	content: '';
	display: block;
	background-color: inherit;
	opacity: 0.9;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	-webkit-transform: scale(2) translateX(-75%) translateY(-75%) translateZ(0) rotate(-28deg);
	transform: scale(2) translateX(-75%) translateY(-75%) translateZ(0) rotate(-28deg);
	transition: -webkit-transform 3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1);
	transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 3s cubic-bezier(0.23, 1, 0.32, 1);
}
.item:hover:after {
	-webkit-transform: scale(2) translateX(0%) translateY(0%) translateZ(0) rotate(-28deg);
	transform: scale(2) translateX(0%) translateY(0%) translateZ(0) rotate(-28deg);
}
.item:hover .item-image {
	-webkit-transform: scale(1.2) translateZ(0);
	transform: scale(1.2) translateZ(0);
}
.item:hover .item-text {
	opacity: 1;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.item-image {
	height: auto;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	transition: -webkit-transform 750ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: transform 750ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: transform 750ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 750ms cubic-bezier(0.23, 1, 0.32, 1);
}
.item-image::before {
	content: "";
	display: block;
	padding-top: 75%;
	overflow: hidden;
}
.item-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	line-height: 0;
}
.item-text {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	opacity: 0;
	text-align: center;
	z-index: 1;
	color: #ffffff;
	transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
	transition: opacity 500ms cubic-bezier(0.23, 1, 0.32, 1), transform 500ms cubic-bezier(0.23, 1, 0.32, 1), -webkit-transform 500ms cubic-bezier(0.23, 1, 0.32, 1);
	transition-delay: 300ms;
	-webkit-transform: translateY(-20%);
	transform: translateY(-20%);
}
.item-text-wrapper {
	width: 100%;
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.item-text-title {
	font-weight: normal;
	font-style: 16px;
	padding: 0 15px;
	margin: 5px 0 0 0;
}
.item-text-dek {
	text-transform: uppercase;
	font-style: 14px;
	opacity: 0.7;
	margin: 0;
}
.item-link {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	line-height: 0;
	overflow: hidden;
	text-indent: -9999px;
}

So this is how it comes into action. It’s another part of our Hover Effect Series.

CodePen.

See the Pen Angled Thumbnail Hover Interaction by Kamran Tahir (@Mah3svara) on CodePen.

unsplash-logoAnthony Garand
0 CommentsClose Comments

Leave a comment