Create Stunning Image Overlays with CSS

Introduction

In this lab, we will dive into the world of CSS programming. The purpose of this lab is to help you gain a better understanding of CSS and its role in web development. You will learn how to style HTML elements, apply different types of CSS selectors, and create responsive layouts using CSS.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL css(("`CSS`")) -.-> css/BasicConceptsGroup(["`Basic Concepts`"]) css(("`CSS`")) -.-> css/BasicStylingGroup(["`Basic Styling`"]) css(("`CSS`")) -.-> css/CoreLayoutGroup(["`Core Layout`"]) css(("`CSS`")) -.-> css/AdvancedLayoutGroup(["`Advanced Layout`"]) css(("`CSS`")) -.-> css/IntermediateStylingGroup(["`Intermediate Styling`"]) css(("`CSS`")) -.-> css/ResponsiveandAdaptiveDesignGroup(["`Responsive and Adaptive Design`"]) css/BasicConceptsGroup -.-> css/selectors("`Selectors`") css/BasicStylingGroup -.-> css/colors("`Colors`") css/BasicStylingGroup -.-> css/text_styling("`Text Styling`") css/CoreLayoutGroup -.-> css/box_model("`Box Model`") css/CoreLayoutGroup -.-> css/margin_and_padding("`Margin and Padding`") css/CoreLayoutGroup -.-> css/borders("`Borders`") css/CoreLayoutGroup -.-> css/width_and_height("`Width and Height`") css/CoreLayoutGroup -.-> css/display_property("`Display Property`") css/CoreLayoutGroup -.-> css/positioning("`Positioning`") css/AdvancedLayoutGroup -.-> css/flexbox("`Flexbox`") css/IntermediateStylingGroup -.-> css/backgrounds("`Backgrounds`") css/ResponsiveandAdaptiveDesignGroup -.-> css/mobile_first_design("`Mobile First Design`") subgraph Lab Skills css/selectors -.-> lab-35220{{"`Image with Text Overlay`"}} css/colors -.-> lab-35220{{"`Image with Text Overlay`"}} css/text_styling -.-> lab-35220{{"`Image with Text Overlay`"}} css/box_model -.-> lab-35220{{"`Image with Text Overlay`"}} css/margin_and_padding -.-> lab-35220{{"`Image with Text Overlay`"}} css/borders -.-> lab-35220{{"`Image with Text Overlay`"}} css/width_and_height -.-> lab-35220{{"`Image with Text Overlay`"}} css/display_property -.-> lab-35220{{"`Image with Text Overlay`"}} css/positioning -.-> lab-35220{{"`Image with Text Overlay`"}} css/flexbox -.-> lab-35220{{"`Image with Text Overlay`"}} css/backgrounds -.-> lab-35220{{"`Image with Text Overlay`"}} css/mobile_first_design -.-> lab-35220{{"`Image with Text Overlay`"}} end

Image With Text Overlay

index.html and style.css have already been provided in the VM.

To display an image with a text overlay, use the <figure> and <figcaption> elements. Use the linear-gradient property in CSS to create the overlay effect over the image. Here is an example code snippet:

<figure class="text-overlay-image">
  <img src="https://picsum.photos/id/971/400/400.jpg" />
  <figcaption>
    <h3>Business <br />Pricing</h3>
  </figcaption>
</figure>

.text-overlay-image {
  box-sizing: border-box;
  position: relative;
  margin: 8px;
  max-width: 400px;
  max-height: 400px;
  width: 100%;
}

.text-overlay-image figcaption {
  box-sizing: border-box;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(0deg, #00000088 30%, #ffffff44 100%);
  color: #fff;
  padding: 16px;
  font: 700 28px/1.2 sans-serif;
}

.text-overlay-image figcaption h3 {
  margin: 0;
}

Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Summary

Congratulations! You have completed the Image With Text Overlay lab. You can practice more labs in LabEx to improve your skills.

Image with Text Overlay

Introduction

Skills Graph

Image With Text Overlay

Summary

Other CSS Tutorials you may like