How to do a Parralax Background Scroll
Add the code below to the source section of the page editor. <p class="jarallax" data-jarallax="" data-speed="0.1" style="height: 200px;"><img alt="" class="jarallax-img" src="Background image url goes here" /><...
Change Image On Hover
To add a hover image to and image, add this code: onmouseover="this.src='/media/hover-image.png';" onmouseout="this.src='/media/default-image.png';" Inside the img tag: <img alt="" src="/media/default-image.png" />...
Float an Image to be Responsive with Text Below
<div style="float: right; margin: 3px 7px;"> <img alt="" src="whatever" style="border-width: 1px; border-style: solid;" /> <p>Text Below</p> </div> <p>Float an Image to be Responsive w...
How to Make an Image Popup
<p><a data-lightbox="spa-image" href="IMAGE PATH HERE"><span class="zoom-image" data-large-image-url="IMAGE PATH HERE"><img alt="" class="img-responsive center-block" src="IMAGE PATH HERE" /></span>&l...
How to Make an Image Responsive?
1) If an image is larger than 350px in width, you will need to make the image responsive. This is to ensure the image properly adjusts to the width of your browser, tablet or mobile device. 2) Double click the image you want to make responsive so the image properties window appears. 3) Remove...