STYLE

Images

This pattern is for displaying images.

Image Size: 360x240

HTML AND CSS Code

HTML CODE

      
        <div class="containerImage">
          <figure>    
            <img src="Images/360x240.png" alt="Alternative text for this image"/>
        </figure>
        </div>

CSS CODE

    
        img{
          border-radius: 1rem;
          box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }

Image with caption

A caption should be used to provide additional context about the image

Image Size: 500x500

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eius molestias deserunt minima quasi laborum
HTML AND CSS Code

HTML CODE

      
        <div class="containerImage">
          <figure>
            <img src="Images/500x500.png" alt="Alternative text for this image"/>
            <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eius molestias deserunt minima quasi laborum</figcaption>
          </figure>
        </div>

CSS CODE

    
      img{
        border-radius: 1rem;
        box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
      }

Linked Image

This example shows a linked image with a caption containing a separate link.

Image Size: 750x500

Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eius molestias deserunt minima quasi laborum
HTML AND CSS Code

HTML CODE

        
          <div class="containerImage">
            <figure>
              <a href="#"><img src="Images/750x500.png" alt="Alternative text for this image"/></a>
              <figcaption>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam eius <a href="#">molestias deserunt minima</a> quasi laborum</figcaption>
            </figure>
          </div>

CSS CODE

      
        img{
          border-radius: 1rem;
          box-shadow: 0 20px 20px -14px rgba(0, 0, 0, 0.25);
        }
        img:hover{
          border: 2px solid #cbe948;
          border-radius: 1rem;   
        }
        img:active{
          border: 5px solid #cbe948;
          border-radius: 1rem;   
        }