Add the code below to the style block in the head of your html OR a linked CSS style sheet, then label the ones you want affected with the image class "pixel".
.pixel {
transition-duration: 0.5s;
transition-property: scale;
}
.pixel:hover {
scale: 2;
image-rendering: pixelated;
transition-duration: 0.5s;
transition-property: scale;
}
Examples:
Here's the code that I used to achieve the decorative first letter you see on this paragraph:
p::first-letter {
font-family: "Princess Sofia";
font-size: 22px;
vertical-align: bottom;
}
This code applies the decorative cap to the first letter of any written text that uses the <p> block. If you want to alter specific blocks in different ways, you can apply ::first-letter (called a pseudo-element or selector) to a div or p class, for example:
.example::first-letter {
font-family: "Grenze Gotisch";
font-size: 35px;
vertical-align: baseline;
line-height: 20px;
}
This <p> does not inherit the cap from the div as it does not have the class 'example'. It has my site's standard decorative cap and the small indent applied to all <p> items by my styling.
This <p> has the specified decorative cap (as well as a small indent) because it has the class 'example'.
Another useful pseudo-element/selector is ::first-line, which functions the same way, but applies the change to the entire first line of your paragraph or element. Below is the code I used for this particular paragraph.
.example2::first-line {
color: darkorange;
}
Please note: if you are using Google fonts, you will need to call the google fonts in an earlier line than your text style sheet. Otherwise, your style sheet won't understand what you're referring to!
Return