Example code for circular hover effect using CSS Transitions

Example code for circular hover effect using CSS Transitions

This article introduces

Online preview and download source code

In today's tutorial we're going to experiment with hover effects on a circle. Since the border-radius property, we can create circular shapes and they are more often appearing in websites as design elements. One use I particularly like to see is in circular thumbnails, which look more interesting than the usual rectangles. Because the circle is such a special shape, we're going to create some special hover effects for it!

We will omit browser prefixes in this tutorial. But you will of course find them in the download file.

So, let’s get started!

HTML Structure

For most of the examples we will use the following structure:

<ul class="ch-grid">
	<li>
		<div class="ch-item ch-img-1">
			<div class="ch-info">
				<h3>Use what you have</h3>
				<p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-2">
			<div class="ch-info">
				Common Causes of Stains
				<p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p>
			</div>
		</div>
	</li>
	<li>
		<div class="ch-item ch-img-3">
			<div class="ch-info">
				<h3>Pink Lightning</h3>
				<p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p>
			</div>
		</div>
	</li>
</ul>

While we could use an image here, we’ll give ourselves more options by using a background image. We will define them in classes starting with "ch-img-".

Now, let’s make some hover effects!

CSS Styles

Let's define some common styles for lists and list items:

.ch-grid {
	margin: 20px 0 0 0;
	padding: 0;
	list-style: none;
	display: block;
	text-align: center;
	width: 100%;
}

.ch-grid:after,
.ch-item:before {
	content: '';
    display: table;
}

.ch-grid:after {
	clear: both;
}

.ch-grid li {
	width: 220px;
	height: 220px;
	display: inline-block;
	margin: 20px;
}

Some of the examples will have different structures, but we will look at each in more detail.

Example 1

The first example will be revealing the description by scaling it, we will also animate the inner shadow of the ".ch-item". So let's position the ".ch-item" and give it a nice inner shadow and transition:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

As you may have noticed before, we’ve given our list items two classes: one is ch-item and another one is used to define a specific background image:

.ch-img-1 { 
	background-image: url(../images/1.jpg);
}

.ch-img-2 { 
	background-image: url(../images/2.jpg);
}

.ch-img-3 { 
	background-image: url(../images/3.jpg);
}

The ".ch-info" will be absolutely positioned and we will give it a semi-transparent background by setting RGBA values. Its opacity will be set to 0, and we'll also scale it down to 0:

.ch-info {
	position: absolute;
	background: rgba(63,147,147, 0.8);
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
}

The title will have some padding and margin and a smooth text shadow:

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 45px 0 0 0;
	height: 140px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

The p element has an opacity of 0 and a transition (we want it to fade in on hover but with a delay):

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
	opacity: 0;
	transition: all 1s ease-in-out 0.4s;
}

The links will use uppercase letters, and we’ll set the hover color to yellow:

.ch-info pa {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: rgba(255,242,34, 0.8);
}

Now, for the fun hover action! The size of the inner shadow of ".ch-item" is set from 16px to 1px:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 1px rgba(255,255,255,0.1),
		0 1px 2px rgba(0,0,0,0.1);
}

".ch-info" will fade in and scale to 1:

.ch-item:hover .ch-info {
	transform: scale(1);
	opacity: 1;
}

The description paragraph p will fade in (delayed):

.ch-item:hover .ch-info p {
	opacity: 1;
}

Here is the first example! Let’s look at the next one.

Example 2

The HTML structure in this example is the same as in the first one.

In this example, we will use the shadow of ".ch-item" to fill our circle and act as a background for the description. So, nothing special here, just an extra shadow value:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 
		inset 0 0 0 0 rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.6),
		0 1px 2px rgba(0,0,0,0.1);
	transition: all 0.4s ease-in-out;
}

Background image:

.ch-img-1 { 
	background-image: url(../images/4.jpg);
}

.ch-img-2 { 
	background-image: url(../images/5.jpg);
}

.ch-img-3 { 
	background-image: url(../images/6.jpg);
}

The ".ch-info" will be scaled again:

.ch-info {
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	opacity: 0;
	transition: all 0.4s ease-in-out;
	transform: scale(0);
	backface-visibility: hidden;
}

Let's style our text element:

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 22px;
	margin: 0 30px;
	padding: 65px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info pa {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: rgba(255,242,34, 0.8);
}

On hover, we’ll set the inner shadow (the reddish shadow) to have a 110px expanded radius. This will cover all circles:

.ch-item:hover {
	box-shadow: 
		inset 0 0 0 110px rgba(200,95,66, 0.4),
		inset 0 0 0 16px rgba(255,255,255,0.8),
		0 1px 2px rgba(0,0,0,0.1);
}

We will scale ".ch-info" and fade it:

.ch-item:hover .ch-info {
	opacity: 1;
	transform: scale(1);	
}

Example 3

In this example we will use rotation. The structure will be slightly different than the previous two examples because we need to add ".ch-thumb" as a second partition. So the list items look like this:

<li>
	<div class="ch-item">	
		<div class="ch-info">
			<h3>Music poster</h3>
			<p>by Jonathan Quintin <a href="http://drbl.in/eGjw">View on Dribbble</a></p>
		</div>
		<div class="ch-thumb ch-img-1"></div>
	</div>
</li>

The styling of ".ch-item" will remain the same as before (with a subtle shadow):

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

The ".ch-thumb" element will have a specific transform origin (somewhere in the middle right) and transition. This will be the element we want to rotate down on hover so that it displays the ".ch-info" element:

.ch-thumb {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5);
	transform-origin: 95% 40%;
	transition: all 0.3s ease-in-out;
}

Create a small brass fastener with a radial gradient using the pseudo class:

.ch-thumb:after {
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
	top: 40%;
	left: 95%;
	margin: -4px 0 0 -4px;
	background: radial-gradient(ellipse at center, rgba(14,14,14,1) 0%,rgba(125,126,125,1) 100%);
	box-shadow: 0 0 1px rgba(255,255,255,0.9);
}

Let's define a background image for each ".ch-thumb" element:

.ch-img-1 { 
	background-image: url(../images/7.jpg);
	z-index: 12;
}

.ch-img-2 { 
	background-image: url(../images/8.jpg);
	z-index: 11;
}

.ch-img-3 { 
	background-image: url(../images/9.jpg);
	z-index: 10;
}

The style of the ".ch-info" element is as follows:

.ch-info {
	position: absolute;
	width: inherit;
	height: inherit;
	border-radius: 50%;
	overflow: hidden;
	background: #c9512e url(../images/noise.png);
	box-shadow: inset 0 0 0 5px rgba(0,0,0,0.05);
}

The text elements will be positioned and styled as follows:

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	position: relative;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 60px;
	padding: 22px 0 0 0;
	height: 85px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

The link will be a small circle that should move in from the right on hover:

.ch-info pa {
	display: block;
	color: #333;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,0.3);
	border-radius: 50%;
	color: #fff;
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 24px;
	margin: 7px auto 0;
	font-family: 'Open Sans', Arial, sans-serif;
	opacity: 0;
	transition: 
		transform 0.3s ease-in-out 0.2s,
		opacity 0.3s ease-in-out 0.2s,
		background 0.2s linear 0s;
	transform: translateX(60px) rotate(90deg);
}

.ch-info pa:hover {
	background: rgba(255,255,255,0.5);
}

Since we want the movement and opacity to happen with a delay, but the background hover to have no transition, we'll separate the transitions.

On hover we will rotate the ".ch-thumb" and move/rotate the link element:

.ch-item:hover .ch-thumb {
	box-shadow: inset 0 0 0 15px rgba(255,255,255, 0.5), 0 1px 3px rgba(0,0,0,0.2);
	transform: rotate(-110deg);
}
.ch-item:hover .ch-info pa{
	opacity: 1;
	transform: translateX(0px) rotate(0deg);
}

Example 4

The fourth example will involve some 3D rotations. Therefore, we need to adjust the structure so that there is one container for perspective and for the front and back. So the list items will look like this:

<li>
	<div class="ch-item ch-img-1">				
		<div class="ch-info-wrap">
			<div class="ch-info">
				<div class="ch-info-front ch-img-1"></div>
				<div class="ch-info-back">
					<h3>Bears Type</h3>
					<p>by Josh Schott <a href="http://drbl.in/ewUW">View on Dribbble</a></p>
				</div>	
			</div>
		</div>
	</div>
</li>

As you can see, we added the background image to ".ch-item" as well as ".ch-info-front". The trick is to give the same background to ".ch-info-wrap".

This will create the illusion that our ".ch-item" has a hole in it.

".ch-item" will have the following styles:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

The ".ch-info-wrap" will have perspective properties, and we will also add a transition for the shadow:

.ch-info-wrap{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	perspective: 800px;
	transition: all 0.4s ease-in-out;
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

The ".ch-info" will need the preserve-3d value for the transform style, and we'll give it a transition since this is the element we'll be rotating in 3d:

.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
	transform-style: preserve-3d;
}

The front and back sides will have the following common styles:

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	backface-visibility: hidden;
}

The back face will be rotated so that we don't see it initially:

.ch-info .ch-info-back {
	transform: rotate3d(0,1,0,180deg);
	background: #000;
}

Again, the background image:

.ch-img-1 { 
	background-image: url(../images/10.jpg);
}

.ch-img-2 { 
	background-image: url(../images/11.jpg);
}

.ch-img-3 { 
	background-image: url(../images/12.jpg);
}

...and text elements:

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info pa {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: rgba(255,242,34, 0.8);
}

On hover, we'll change the shadow of the ".ch-info-wrap" and rotate the ".ch-info" so we can see the back side:

.ch-item:hover .ch-info-wrap {
	box-shadow: 
		0 0 0 0 rgba(255,255,255,0.8), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
}

.ch-item:hover .ch-info {
	transform: rotate3d(0,1,0,-180deg);
}

Example 5

In this example, we want to shrink ".ch-thumb" to 0 and show ".ch-info" by fading it in and shrinking it to 1. The structure of the fifth example is the same as that of the previous example.

The ".ch-item" has the following styles:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

".ch-info-wrap" and ".ch-info" will have the following common style:

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
}

Let's do the "hole" trick again by setting the same background to ".ch-info-wrap":

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);

}

A common style is "front" and "back" (it's not front and back anymore):

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
}

The "front" will have a transition (it will shrink and disappear):

.ch-info .ch-info-front {
	transition: all 0.6s ease-in-out;
}

".ch-info-back" will initially have 0 opacity and can be expanded to 1.5:

.ch-info .ch-info-back {
	opacity: 0;
	background: #223e87;
	pointer-events: none;
	transform: scale(1.5);
	transition: all 0.4s ease-in-out 0.2s;
}

We need to set pointer-events to none because we don't want the element to "block" everything else... remember, it's zoomed in, we can't see it because of its opacity, but it's still there.

Like usual background image and text elements, just with some different colors:

.ch-img-1 { 
	background-image: url(../images/13.jpg);
}

.ch-img-2 { 
	background-image: url(../images/14.jpg);
}

.ch-img-3 { 
	background-image: url(../images/15.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size: 18px;
	margin: 0 15px;
	padding: 40px 0 0 0;
	height: 80px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px 0;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info pa {
	display: block;
	color: #e7615e;
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: #fff;
}

On hover we will scale down the ".ch-info-front" portion to 0 and set the opacity to 0. This will make it disappear behind.

.ch-item:hover .ch-info-front {
	transform: scale(0);
	opacity: 0;
}

".ch-info-back" will shrink to 1 and fade in. We also set the pointer event to auto, because now we want to be able to click the link:

.ch-item:hover .ch-info-back {
	transform: scale(1);
	opacity: 1;
	pointer-events: auto;
}

Example 6

In this example, we want to flip the inner ".ch-thumb" section down to show the description. The HTML will be the same as in the previous two examples.

".ch-item" will be styled as before:

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	cursor: default;
}

The common style of the wrapper and the description element:

".ch-info-wrap", general styles for ".ch-info" elements:

.ch-info-wrap, 
.ch-info{
	position: absolute;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	transition: all 0.4s ease-in-out;
}

".ch-info-wrap" will have perspective:

.ch-info-wrap {
	top: 20px;
	left: 20px;
	background: #f9f9f9 url(../images/bg.jpg);
	box-shadow: 
		0 0 0 20px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(115,114, 23, 0.8);
	perspective: 800px;
}

The ".ch-info" element requires the following transformation styles:

.ch-info {
	transform-style: preserve-3d;
}

There will be a transition between the front and back sides. Note that we don't set backface-visibility to hidden this time, because we want the backside of the ".ch-thumb" to show when we flip it down:

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	transition: all 0.6s ease-in-out;
}

Let's set the correct transform-origin so we can turn it on:

.ch-info .ch-info-front {
	transform-origin: 50% 100%;	
	z-index: 100;
	box-shadow: 
		inset 2px 1px 4px rgba(0,0,0,0.1);
}

We'll set an RGBA value with zero opacity for ".ch-info-back":

.ch-info .ch-info-back {
	background: rgba(230,132,107,0);
}

and the usual style of other elements:

.ch-img-1 { 
	background-image: url(../images/16.jpg);
}

.ch-img-2 { 
	background-image: url(../images/17.jpg);
}

.ch-img-3 { 
	background-image: url(../images/18.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size: 14px;
	margin: 0 25px;
	padding: 40px 0 0 0;
	height: 90px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info pa {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: rgba(255,242,34, 0.8);
}

While hovering, we'll rotate the front and animate the shadow slightly. The back will fade to its background color:

.ch-item:hover .ch-info-front {
	transform: rotate3d(1,0,0,-180deg);
	box-shadow: 
		inset 0 0 5px rgba(255,255,255,0.2), 
		inset 0 0 3px rgba(0,0,0,0.3);
}

.ch-item:hover .ch-info-back {
	background: rgba(230,132,107,0.6);
}

Example 7

The last example will be like rotating the cube, we will show the description by rotating it from the top back. Since we will be rotating each face, we don't need an extra parent element. So our HTML will look like this:

<li>
	<div class="ch-item">				
		<div class="ch-info">
			<div class="ch-info-front ch-img-1"></div>
			<div class="ch-info-back">
				<h3>Mouse</h3>
				<p>by Alexander Shumihin <a href="http://drbl.in/eAoj">View on Dribbble</a></p>
			</div>	
		</div>
	</div>
</li>

We will provide perspective values ​​for ".ch-item":

.ch-item {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	position: relative;
	cursor: default;
	perspective: 900px;
}

The ".ch-info" will need the preserve-3d value:

.ch-info{
	position: absolute;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
}

The front and back faces will have a transition and the transform origin will be set to 50% 0%:

.ch-info > div {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background-position: center center;
	transition: all 0.4s linear;
	transform-origin: 50% 0%;
}

Let's give the front part a nice inner shadow:

.ch-info .ch-info-front {
	box-shadow: inset 0 0 0 16px rgba(0,0,0,0.3);
}

The backface will initially be rotated to appear as the bottom face of the cube:

.ch-info .ch-info-back {
	transform: translate3d(0,0,-220px) rotate3d(1,0,0,90deg);
	background: #000;
	opacity: 0;
}

Common styles for background images and text elements:

.ch-img-1 { 
	background-image: url(../images/19.jpg);
}

.ch-img-2 { 
	background-image: url(../images/20.jpg);
}

.ch-img-3 { 
	background-image: url(../images/21.jpg);
}

.ch-info h3 {
	color: #fff;
	text-transform:uppercase;
	letter-spacing: 2px;
	font-size: 24px;
	margin: 0 15px;
	padding: 60px 0 0 0;
	height: 110px;
	font-family: 'Open Sans', Arial, sans-serif;
	text-shadow: 
		0 0 1px #fff, 
		0 1px 2px rgba(0,0,0,0.3);
}

.ch-info p {
	color: #fff;
	padding: 10px 5px;
	font-style: italic;
	margin: 0 30px;
	font-size: 12px;
	border-top: 1px solid rgba(255,255,255,0.5);
}

.ch-info pa {
	display: block;
	color: rgba(255,255,255,0.7);
	font-style: normal;
	font-weight: 700;
	text-transform:uppercase;
	font-size: 9px;
	letter-spacing: 1px;
	padding-top: 4px;
	font-family: 'Open Sans', Arial, sans-serif;
}

.ch-info pa:hover {
	color: rgba(255,242,34, 0.8);
}

We'll use translate3d to move the front on the Y axis of 3d space, and rotate3d to actually rotate it. We'll also fade it out, since we don't want to see any part of it later:

.ch-item:hover .ch-info-front {
	transform: translate3d(0,280px,0) rotate3d(1,0,0,-90deg);
	opacity: 0;
}

The back face will be rotated "backwards" to 0 degrees (remember, initially it was rotated downwards):

.ch-item:hover .ch-info-back {
	transform: rotate3d(1,0,0,0deg);
	opacity: 1;
}

That's it! A whole bunch of hover effects, allowing for many different variations, go try them out!

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<:  Solution to the problem of stuck when clicking Select All in Element's shuttle box with large amount of data

>>:  Solve the problem of the container showing Exited (0) after docker run

Recommend

Understanding v-bind in vue

Table of contents 1. Analysis of key source code ...

Sublime / vscode quick implementation of generating HTML code

Table of contents Basic HTML structure Generate s...

Organize the common knowledge points of CocosCreator

Table of contents 1. Scene loading 2. Find Node 1...

Simple example of limit parameter of mysql paging

Two parameters of Mysql paging select * from user...

Quick understanding of Vue routing navigation guard

Table of contents 1. Global Guard 1. Global front...

How to install WSL2 Ubuntu20.04 on Windows 10 and set up the docker environment

Enable WSL Make sure the system is Windows 10 200...

Introduction to MySQL statement comments

MySQL supports three types of comments: 1. From t...

Detailed explanation of Linux server status and performance related commands

Server Status Analysis View Linux server CPU deta...

MySQL 5.7.18 installation and configuration tutorial under Windows

This article shares the installation and configur...

Vue implements a simple timer component

When doing a project, it is inevitable to encount...

Basic use of subqueries in MySQL

Table of contents 1. Subquery definition 2. Subqu...

How to use js to communicate between two html windows

Scenario: When page A opens page B, after operati...

Solution to the failure of loading dynamic library when Linux program is running

Unable to load dynamic library under Linux When t...

Detailed explanation of Excel parsing and exporting based on Vue

Table of contents Preface Basic Introduction Code...

Two ways to build Docker images

Table of contents Update the image from an existi...