Archive of Our Own

Chapter Text

Hello fellow AO3 users!

This little guide will show you how to use the hover code and combine it with the transition property to change the style of your text and images.

You can try hovering over/tapping on the title of this work to see a little preview of one of the effects you can get by using the codes in this tutorial.

This first chapter will focus on the text color, font, background and size and also adds the zoom effect.

By the way, the guide for colored text is here, the guide for using new fonts is here and the guide to change the background color of the text (aka highlight text) is here.

In the examples, I used the time I like best for the duration of the transition, but you can shorten or lengthen the duration of the transition as you see fit.

The general rule is to write the text property you want to change in the main code, then write the change settings in the hover code.

So the template is this, where ????? is the property you want to change (color, size, font, background), xxx is the current value of the property (only needed if it’s not the standard color/font/size/background) and yyyyyy is the value for that property that will appear on hover:

#workskin .name {
??????: xxxxx;
transition: transform 750ms ease-in-out 0s;
transition-property: ?????;
}

#workskin .name:hover {
??????: yyyyyyyy;
}

TEXT IN SOLID COLOR

Let’s start with the text color: to make the color change slowly, you will write the codes like this:

#workskin .michele {
  transition: transform 750ms ease-in-out 0s;
  transition-property: color;
}

#workskin .michele:hover {
  color: #ff0000;
}

Then you apply it like this in HTML:

<span class="michele">This is the text that will turn red on hover.</span>

Or if you want to apply it to more than one paragraph at the same time:

<div class="michele"> This is the text that will turn red on hover.</div>

And this is the result:

This is the text that will turn red on hover.

If you want to have a certain text color before the change on hover, for example you want your text to be pink #ff1493, but then you want it to turn green #00ff00 on hover, you will write the codes like this instead:

#workskin .pinktogreen {
  color: #ff1493;
  transition: transform 750ms ease-in-out 0s;
  transition-property: color;
}

#workskin .pinktogreen:hover {
  color: #00ff00;
}

Then you apply it like this in HTML:

<span class="pinktogreen">This is the text that will turn from pink to green on hover.</span>

Or if you want to apply it to more than one paragraph at the same time:

<div class="pinktogreen"> This is the text that will turn from pink to green on hover.</div>

And this is the result:

This is the text that will turn from pink to green on hover.

FONT-FAMILY

To change the font, you will write the code like this:

#workskin .gino {
  transition: transform 750ms ease-in-out 0s;
  transition-property: font-family;
}

#workskin .gino:hover {
  font-family: Lucida Calligraphy, cursive;
}

Then apply it like this in HTML:

<span class="gino">This text will turn into cursive font on hover.</span>

And this is the result

This text will turn into cursive font on hover.

FONT-SIZE

To change the font size, you will write the codes like this:

#workskin .conte {
  transition: transform 750ms ease-in-out 0s;
  transition-property: font-size;
}

#workskin .conte:hover {
  font-size: 34px;
}

Then apply it like this in HTML:

<span class="conte">This text will grow bigger on hover.</span>

And this is the result

This text will grow bigger on hover.

BACKGROUND IN SOLID COLOR

To change the background making it appear slowly, you will write the code like this:

#workskin .tappo {
  transition: transform 750ms ease-in-out 0s;
  transition-property: background;
}

#workskin .tappo:hover {
  background: #ffa500;
}

Then apply it like this in HTML:

<span class="tappo">This text will get orange background on hover.</span>

And this is the result

This text will get orange background on hover.

You will find more effects for the background in solid color a few lines below, in the section for gradient background. This is because to achieve the effect of making the background in solid color appear from left to right/right to left/top to bottom/bottom to top/center to sides/center to top and bottom, you need to use a "fake gradient", which is a gradient that uses a repeat of the same color.

CHANGING MULTIPLE PROPERTIES AT ONCE

To change the color and font at the same time, you will write the codes like this:

#workskin .pippo {
  transition: transform 750ms ease-in-out 0s;
  transition-property: color, font-family;
}

#workskin .pippo:hover {
  color: #006400;
  font-family: Lucida Calligraphy, cursive;
}

Then apply it like this in HTML:

<span class="pippo">This text will become green and in cursive font on hover.</span>

And this is the result

This text will turn green and in cursive font on hover.

To change the color and background at the same time, you will write the codes like this:

#workskin .duecolori {
  transition: transform 750ms ease-in-out 0s;
  transition-property: color, background;
}

#workskin .duecolori:hover {
  color: #0000ff;
  background: #ffff00;
}

Then apply it like this in HTML:

<span class="duecolori">This text will become blue and with yellow background on hover.</span>

And this is the result

This text will turn blue and with yellow background on hover.

To change the color, font-family and background at the same time, you will write the codes like this:

#workskin .tripletta {
  transition: transform 750ms ease-in-out 0s;
  transition-property: color, font-family, background;
}

#workskin .tripletta:hover {
  color: #0000ff;
  font-family: Arial, sans-serif;
  background: #ffff00;
}

Then apply it like this in HTML:

<span class="tripletta">Triple change on hover.</span>

And this is the result

Triple change on hover.

To change the color, font-family, font-size and background at the same time, you will write the codes like this:

#workskin .quattrino {
  transition: transform 750ms ease-in-out 0s;
  transition-property: color, font-family, background, font-size;
}

#workskin .quattrino:hover {
  color: #0000ff;
  font-family: Arial, sans-serif;
  background: #ffff00;
  font-size: 40px;
}

Then apply it like this in HTML:

<span class="quattrino">All properties change on hover.</span>

And this is the result

All properties change on hover.

So, basically, you need to put all the properties you want to change in the transition-property line in the main code, then set the values for each property in the hover code.

GRADIENT COLORS

If you want to change the style with gradient text or background, the change will be immediate, for example for background:

#workskin .tigro {
  transition-property: background;
}

#workskin .tigro:hover {
  background: linear-gradient(to right, #ffa500, #0000ff);
}

Then apply it like this in HTML:

<span class="tigro">This text will get orange/blue gradient background on hover.</span>

And this is the result

This text will get orange/blue gradient background on hover.

And for the text color:

#workskin .puffetta {
  transition-property: background, color;
}

#workskin .puffetta:hover {
  background: linear-gradient(to right, #ffa500, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

Then apply it like this in HTML:

<span class="puffetta">This text will become gradient on hover.</span>

And this is the result

This text will become gradient on hover.

GRADIENT BACKGROUND WITH SLOW TRANSITION

If you want the gradient color or background transition to be slow, you will need different codes.

Let’s start with the easier code, which is the code for the gradient background.

There are six different types of transition, based on the direction you want to give to the appearing background. The direction can be applied also to an image used as background.

Left to right 

#workskin .severus {
  background-image: linear-gradient(#ff0000, #00ff00);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
  background-position: left;
}

#workskin .severus:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="severus">The gradient background appears from left to right on hover.</span>

And this is the result

The gradient background appears from left to right on hover.

Right to left

To make the background show from right to left instead, we only need to change one thing in our CSS. Change the background-position to right.

#workskin .draco {
  background-image: linear-gradient(#ffa500, #cbcff4);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
  background-position: right;
}

#workskin .draco:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="draco">The gradient background appears from right to left on hover.</span>

And this is the result

The gradient background appears from right to left on hover.

Top to bottom

You can make the background show from top to bottom by simply changing the background-size property – width to 0 and height to100% .

#workskin .regina {
  background-image: linear-gradient(#0000ff, #ffff00);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
}

#workskin .regina:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="regina">The gradient background appears from top to bottom on hover.</span>

And this is the result

The gradient background appears from top to bottom on hover.

Bottom to top

Make the background show from bottom to top by simply changing the background-size property – width to 100% and height to 0. We should also change the background-position to bottom.

#workskin .morena {
  background-image: linear-gradient(#ff1493, #1390ff);
  background-repeat: no-repeat;
 background-size: 100% 0;
  background-position: bottom;
  transition: .5s;
}

#workskin .morena:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="morena">The gradient background appears from bottom to top on hover.</span>

And this is the result

The gradient background appears from bottom to top on hover.

Spreading vertically from center to top and bottom

#workskin .gander {
  background-image: linear-gradient(#ff1493, #1e90ff);
  background-repeat: no-repeat;
  background-size: 100% 0;
  background-position: center;
  transition: .5s;
}

#workskin .gander:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="gander">The gradient background appears from center to top and bottom on hover.</span>

And this is the result

The gradient background appears from center to top and bottom on hover.

Spreading horizontally from center to left and right

#workskin .scrooge {
  background-image: linear-gradient(#ff1493, #1e90ff);
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: center;
  transition: .5s;
}

#workskin .scrooge:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="scrooge ">The gradient background appears from center to left and right on hover.</span>

And this is the result

The gradient background appears from center to left and right on hover.

If you want to apply these effects to a solid color background, you simply need to repeat the same color value twice in the gradient, like this (I'm using bright yellow #ffff00 in this example):

#workskin .vivace {
  transition: .5s;
  background-image: linear-gradient(#ffff00, #ffff00);
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: left;
}

#workskin .vivace:hover {
  background-size: 100% 100%;
}

Then you apply it like this in HTML:

<span class="vivace">This text will get a background in solid yellow color on hover from left to right.</span>

And this is the result:

This text will get a background in solid yellow color on hover from left to right.

If you want to apply the six codes above to a background image, for example with an image of pastries, you will write this in the background-image line:

#workskin .dolce {
  transition: .5s;
  background-image: url('https://previews.123rf.com/images/klavapuk/klavapuk1805/klavapuk180500147/102499567-seamless-background-of-sweet-and-dessert-doodle-pattern-wiht-cute-cake-sweet-donat-cartoon.jpg');
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: left;
}

#workskin .dolce:hover {
  background-size: 100% 100%;
}

Make sure that the image you're using is either in format .jpg or in format .png as these are the only formats accepted by the site for images.

And when you apply it in HTML like this:

<div class="dolce">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

You get this result:

BLOCKQUOTE WITH HOVER EFFECTS

All of the effects you have seen so far can also be used for blockquote (the guide for customizing blockquote is here).

For example if you write the code like this (I’m making the background in radial shades of fuchsia and pink and I’m making it appear from left to right in the example):

#workskin blockquote.fucsia {
  background-image: radial-gradient(ellipse farthest-corner at center center, #FF20E9 0%, #FF005D 30%, #AB30CA 50%, #FF005D 70%, #FF20E9 100%);
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
  background-position: left;
}

#workskin blockquote.fucsia:hover {
  background-size: 100% 100%;
}

And you apply it like this in HTML:

<blockquote class="blockquote fucsia"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</blockquote>

You get this result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If you write the code like this instead, using the slow transition for the solid color background without the "fake gradient":

#workskin blockquote.gioia {
  transition: transform 750ms ease-in-out 0s;
  transition-property: background;
}

#workskin blockquote.gioia:hover {
background: #ffcce6;
}

You get this result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

You can also change the style of the blockquote border on hover. Just write the code like this (I'm changing the style of the right border and using an image of strawberries for the example);

#workskin blockquote.fragole {
border-left: none;
  transition: transform 750ms ease-in-out 0s;
  transition-property: border-right;
}

#workskin blockquote.fragole:hover {
border-image: url('https://static.vecteezy.com/system/resources/thumbnails/009/830/980/small/cute-red-strawberries-on-a-pink-background-trendy-strawberry-pattern-design-for-wallpapers-print-fabric-and-stationery-design-red-strawberry-sticker-pattern-illustrated-fruit-vector.jpg') 10% round;
  border-right: 35px solid;
}

And you get this result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

And if you want to use a gradient color for your border, you will write the code like this:

#workskin blockquote.gelato {
  transition: transform 750ms ease-in-out 0s;
  transition-property: border-left;
}

#workskin blockquote.gelato:hover {
  border-image: linear-gradient( to bottom, #66ff66, #ffcce6, #66ff66, #ffcce6) 10% round;
  border-left: 35px solid;
}

And you get this result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

If you want to change the style of the first letter of your blockquote (my guide to style the first letter and first line of your works and siteskins is here), you will write the code like this:

#workskin blockquote.mario {
  border-left: 3px solid #FF1493;
  transition: transform 750ms ease-in-out 0s;
  transition-property: color;
}

#workskin blockquote.mario:hover p::first-letter {
  color: #FF1493;
}

And you get this result:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

GRADIENT TEXT WITH SLOW TRANSITION

To have a slow transition from standard text to gradient text, unfortunately there is no code, but there is a way around it, though it’s a bit laborious: you need to write the codes for each letter of the word (or each word of the paragraph) and then apply the command to each letter/word individually.

The codes are written like this (in the example, corto-breve is the main code, corto-c?-breve is the code and I’m simulating a rainbow with the colors):

#workskin .corto-breve {

  font-size: 26px;

  display: inline-block;

  transition-property: color;

  transition: opacity 0.8s linear 1.0s;

}

#workskin .corto-breve:hover {

  opacity: 1;

  transition: color 0s linear, opacity 0.25s linear;

}

#workskin .corto-breve:hover .corto-c1-breve {

  transition-delay: 0.10s;

  color: #ff0000;

}

#workskin .corto-breve:hover .corto-c2-breve {

  transition-delay: 0.20s;

  color: #ffa500;

}

#workskin .corto-breve:hover .corto-c3-breve {

  transition-delay: 0.30s;

  color: #00ff00;

}

#workskin .corto-breve:hover .corto-c4-breve {

  transition-delay: 0.40s;

  color: #1e90ff;

}

#workskin .corto-breve:hover .corto-c5-breve {

  transition-delay: 0.50s;

  color: #e502ed;

}

As you can see, there is a time difference of 0.10 seconds between each code and the previous one, but you can shorten or lengthen the time delay according to your preferences.

Then you apply it like this in HTML (I’m using the word HELLO all in capital letters and I'm centering the text so that you can better see the effect):

<center><p class="corto-breve"><span class="corto-c1-breve">H</span><span class="corto-c2-breve">E</span><span class="corto-c3-breve">L</span><span class="corto-c4-breve">L</span><span class="corto-c5-breve">O</span></p></center>

And this is the result

GRADIENT TEXT APPEARING ON HOVER

As a special bonus, check these codes: when using them, you will start with transparent text and they will make gradient text appear on hover. Like for the gradient background, there are six different types of transition, based on the direction you want to give to the appearing text. In the examples I will make the text in size 24px so that you can better see the effect.

Left to right

#workskin .donald {
  background-image: linear-gradient(#ff0000, #00ff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
  background-position: left;
}

#workskin .donald:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="donald">The gradient text appears from left to right on hover.</span>

And this is the result

This is the line where the gradient text appears from left to right on hover.

Right to left

To make the gradient text appear from right to left instead, we only need to change one thing in our CSS. Change the background-position to right.

#workskin .fethry {
  background-image: linear-gradient(#ff0000, #0000ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: .5s;
  background-position: right;
}

#workskin .fethry:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="fethry">The gradient text appears from right to left on hover.</span>

And this is the result

This is the line where the gradient text appears appears from right to left on hover.

Top to bottom

To make the gradient text appear from top to bottom, change the background-size property – width to 100% and height to 0.

#workskin .gladstone {
  background-image: linear-gradient(#0000ff, #00ff00);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 100% 0;
  transition: .5s;
}

#workskin .gladstone:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="gladstone ">The gradient text appears from top to bottom on hover.</span>

And this is the result

This is the line where the gradient text appears appears from top to bottom on hover.

Bottom to top

To make the gradient text appear from bottom to top, change the background-size property – width to 100% and height to 0. We should also change the background-position to bottom.

#workskin .duck {
  background-image: linear-gradient(#ff1493, #1e90ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 100% 0;
  background-position: bottom;
  transition: .5s;
}

#workskin .duck:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="duck">The gradient text appears from bottom to top on hover.</span>

And this is the result

This is the line where the gradient text appears appears from bottom to top on hover.

Spreading vertically from center to top and bottom

#workskin .passato {
  background-image: linear-gradient(#ff1493, #1e90ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 100% 0;
  background-position: center;
  transition: .5s;
}

#workskin .passato:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="passato">The gradient text appears from center to top and bottom on hover.</span>

And this is the result

This is the line where the gradient text appears from center to top and bottom on hover.

Spreading horizontally from center to left and right

#workskin .futuro {
  background-image: linear-gradient(#ff1493, #1e90ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
font-size: 24px;
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: center;
  transition: .5s;
}

#workskin .futuro:hover {
  background-size: 100% 100%;
}

Then apply it like this in HTML:

<span class="futuro">The gradient text appears from center to left and right on hover.</span>

And this is the result

This is the line where the gradient text appears from center to left and right on hover.

ZOOM EFFECT

To have a zoom effect (the text or text box or image gets quickly bigger on hover), you need to use these two codes:

#workskin .zoom {

  display: inline-block;

  transition: transform .5s;

}

#workskin .zoom:hover {

  transform: scale(1.5);

}

Then you apply it like this for the text:

<span class="zoom">This is the text with Zoom on hover.</span>

And this is the result:

And like this for the text box (I’m using the text box I named Neo from chapter 4 and I’m positioning it at the center of the page in this example):

<center><div class="zoom"><div class="Neo">Zoom on hover</div></div></center>

And this is the result:

By the way, the guide to create text boxes (and to make them look like journal pages and how to put text boxes inside another text box) is here.

Next chapter will focus on glitching text that disappears on hover, neon text, shadowed text and 3D text.