Text Blocks Over Image, Updated

Developer
KatieK
Size
3,122 Kb
Views
6,072
  1. Text Blocks Over Image, Updated Previews
  2. Text Blocks Over Image, Updated HTML Codes
  3. Text Blocks Over Image, Updated CSS Codes

How do I make an text blocks over image, updated?

Moderized and improved from http://css-tricks.com/text-blocks-over-image/.. What is a text blocks over image, updated? How do you make a text blocks over image, updated? This script and codes were developed by KatieK on 12 January 2023, Thursday.

Text Blocks Over Image, Updated Previews
IQ Test

Text Blocks Over Image, Updated - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text Blocks Over Image, Updated</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/abcei.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Text Blocks Over Image, Updated</h1>
<figure> <img src="http://baconmockup.com/501/351" /> <figcaption> <span> sausage pork belly frankfurter <span class='spacer'></span> <br /> <span class='spacer'></span> bacon ipsum dolor sit amet </span> </figcaption>
</figure>
<p>Modernized and improved from <a href="https://css-tricks.com/text-blocks-over-image/">https://css-tricks.com/text-blocks-over-image/</a>.</p>
<h3>Key Updates</h3>
<ul> <li>Positioning the <code>h2</code> by <code>bottom</code> pins the caption to the <em>bottom</em> of the image.</li> <li>Reset bg color declaration on spacer element.</li>
<!-- <li>Used <code>:before</code> and <code>:after</code> for line-break spacing.</li> --> <li>Switched to <a href="http://baconipsum.com/">http://baconipsum.com/</a> and <a href="http://baconmockup.com">http://baconmockup.com</a> for better BEO.</li> <li>Semantcized to figure/figcaption markup.</li>
</ul>
</body>
</html>

Text Blocks Over Image, Updated - Script Codes CSS Codes

figure { position: relative;
}
figure img { display: block; /* removes trailing whitespace */ outline: solid #000 1px;
}
figcaption { position: absolute; bottom: 10%; width: 501px; margin: 0; font-size: 1.5rem; font-weight: bold; line-height: 200%; text-transform: capitalize;
}
figcaption span { color: white; background: black; /* fallback */ background: rgba(0, 0, 0, 0.7); padding: .5em;
}
figcaption span.spacer { padding: 0 5px; background: transparent;
}
figcaption span.spacer::before { content: " ";
}
Text Blocks Over Image, Updated - Script Codes
Text Blocks Over Image, Updated - Script Codes
Home Page Home
Developer KatieK
Username KatieK2
Uploaded January 12, 2023
Rating 3
Size 3,122 Kb
Views 6,072
Do you need developer help for Text Blocks Over Image, Updated?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

KatieK (KatieK2) Script Codes
Name
Placeholder Images
SVG Experiments with coordinate system transforms
SVG - 2 Colors in CSS
Reverse the String
Transparent Textures
Experiments with Vertical Centering
Fun with Clipping
Flexbox Buildup
Grid with Collapsing Borders
Dadgumit, Blowouts
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!