UIUX Component

Create cool and powerful image masking via CSS. On background URL property, please make sure silhouette image in jpg for the mask as located in second URL in the property. DEMO CSS section { width: 300 px; height: 300 px; background: url( "https://picsum.photos/id/10/1080/1080.jpg" ), url( "https://i.pinimg.com/originals/21/96/44/219644d4cb995ddd20f9b5516960e50b.jpg" ); background - blend - mode: screen; background - size: contain; background - position: center; background - repeat: no - repeat; }

Text wrap around the image with shape-outside for visual flair! DEMO Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at ullamcorper mi imperdiet. Phasellus sit amet rutrum nisi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis commodo nulla. Etiam commodo, augue eu volutpat vehicula, ipsum diam tincidunt orci, vel imperdiet quam felis at ipsum. Nulla sit amet dolor eu neque interdum pretium id cursus metus. Quisque malesuada orci mattis risus sodales rhoncus. Quisque commodo sagittis enim quis molestie. Vestibulum tincidunt at erat a iaculis. Sed tristique diam eget quam mollis, at u...

Here's a CSS trick also known as "the padding hack" to set the aspect ratio of an element! Image Ratio in 16/9 Image Ratio in 4/3 HTML < div class = "aspect-ratio" > < img src = "https://picsum.photos/1080/720" alt = "" > </ div > < div class = "aspect-ratio fourthree" > < img src = "https://picsum.photos/1080/720" alt = "" > </ div > CSS . aspect - ratio { -- aspect - ratio: 16 / 9 ; position: relative; height: 0 ; padding - bottom: calc( 100 %/ (var( -- aspect - ratio))); } . aspect - ratio . fourthree { -- aspect - ratio: 4 / 3 ; } . aspect - ratio > * { position: absolute; top: 0 ; left: 0 ; width: 100 % ; height: 100 % ; object - fit: cover; }

Images affect speed page loading. There is a native loading attribute with the lazy value for img elements! Image will be downloaded only when a browser have to display they in viewport. Just add attribute  loading="lazy" for img element. DEMO HTML < img src = "../imagepath.jpg" loading = "lazy" alt = "Image Title" >