Image Components - Image Frames

Image Display - Frames

Image Frame

Image frame needs to have two classes to be included.

• div element with the class image-frame
• In the img tag, add the class image-frame-img

Implementation Code and the output

<div class="image-frame">
  <img class="image-frame-img" src="image.jpg"
    alt="image description">
</div>

Output Sample

Image Frame - with Title

Image frame needs to have two classes to be included.

• div element with the class image-frame
• In the img tag, add the class image-frame-img
• Add a div element with the class image-title after the img tag
• Include the title for the element in the div tag element as shown in the code example below. img tag (example Nature Image with green fields )

Implementation Code and the output

<div class="image-frame">
  <img class="image-frame-img" src="image.jpg"
    alt="image description">
  <div class="image-title">
      Nature Image with green fields
  </div>
</div>

Output Sample

Nature Image with green fields