Media Elements
Animated or Unique Media Elements
Below is a collection of different unique and modern ways to display media elements on your web pages, like videos or images. A lot of sites will just display images or videos as they are, simply aligned with the text content on a page, but here we have some more eye catching designs that incorporate media in a creative way.
Infinite Image Scrolling
This animated image section is built using custom HTML within an HTML block, and custom CSS is the WP theme customizer. The look was inspired by one of the several cool elements found on OCL Group’s website.
The code for this was not actually written using the OCL Group’s website, but instead was built using a Stack Overflow thread that seemed similar, titled “Infinite horizontal scrolling image loop“.
Consectetur adipiscing.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin ante fermentum tincidunt fringilla. Aliquam quis erat vel magna sagittis tincidunt. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec laoreet mauris. In elementum egestas nulla in elementum.
Contact
Custom Filtered Background Image
This section was built using custom HTML and CSS, implemented using a WordPress HTML block. The general layout would need to stay the same but the background image can easily be changed out for something different, it just needs to have enough color contrast for the effect to work as intended.
This is a Test Button
Sticky GAllery
This section was accomplished using the built in Sticky Settings
This is a Kadence Row, with two columns. This left column, if you go into “Advanced Settings” & then into “Sticky Settings”, you can turn this feature on which will automatically make this one column remain on the screen as long as the right column is still scrolling with content.
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla quis quam eu libero posuere fringilla. Quisque dui ante, vehicula eget odio nec, vestibulum finibus enim. Vestibulum sit amet nulla ornare, rutrum augue sed, ultricies elit. Cras sit amet purus ligula. Vestibulum pretium quam id felis suscipit dictum. Aenean mauris nibh, mattis eu vestibulum at, hendrerit nec mauris. Nam sit amet lorem magna.
Image with Reflection – HTML and CSS
CSS Image Reflection Effect
This image reflection effect was created using standard HTML and CSS.
The CSS uses mask-image, transforms, and linear gradient to give the illusion that the second image is actually a faded reflection of the original, making the image seem like it’s hovering over a base of some kind. A nice subtle effect to make your images, and website, stand out.
This is Simply a Copy of Effect Above
This is just a simple copy of the image effect above, just switched horizontally to enhance the visual.
I’ve duplicated the above content and switch it horizontally to give a more realistic example of how this image effect would look on a real website. I envision it being on a page with several images and associated content blocks.
