Skip to main content
MyCoE

Image overlay block

The image overlay block is used to highlight a single item such as a story or research. It is mainly used on the Home Page, but it can also go on the Layout content type.

  • The background can be an image or a short video. If using a video, the video should be no more than a few seconds long, and it should be converted into the animated gif format.
  • Media size: 1903x1068 pixels.
  • The text can only go on the right side of the block.

example

Code

Place this code in a Custom Block. Make sure to include the CSS.

	
<style type="text/css">
        @media only screen and (max-width: 575px) {
                #image-overlay {
                background-image: none !important;
                }
        }
        
        @media only screen and (min-width: 575px) {
                #image-overlay-mobile img {
                display: none;
                }
        }
</style>

<div class="background-deferred p-lg-5" data-src="img.jpg" id="image-overlay">
        <div class="container my-lg-5 py-lg-4 m-auto">
                <div class="row py-3">
                        <div class="col-sm-6" id="image-overlay-mobile"><img loading="lazy" width="540" height="304" alt="#" src="img.jpg" /></div>
                        <div class="col-sm-6 p-4" style="background-color: white; opacity:0.9;">
                                <p class="small text-dark font-weight-bold text-uppercase mb-2">Tag goes here</p>
                                <h2 class="mt-0">Headline goes here</h2>
                                <p>Body text goes here.</p>
                        <a class="btn btn-default" href="#">Read more</a></div>
                </div>
        </div>
</div>