I am tryin trying to add a rollover element to my website. I want the photo to change to a new photo once the user hovers over with the mouse. Then change back to the original image. I started by adding a link onto the page, and inserting my first image into the link. I am not sure what to do now that my image has been formatted to the width and height that I want it to be.
What is the html code for the rollover image? And how do I incorporate it in the html area that already has the html code for the formatted image?
There’s no native image “rollover” component, or “rollover effect” in Bootstrap, or the Bootstrap Studio program. This is something you have to create yourself by writing custom HTML, CSS or Javascript.
You cannot directly edit the HTML in Bootstrap Studio. HTML is created by dragging and dropping components on to the page. If you want to add custom HTML to the page, you can use the Custom Code component.
There are numerous ways to create an image rollover, and a simple Google search will bring up hundreds of examples, but you wouldn’t use a link for this. The simplest way is to set the image as the background in a div, and use a CSS transition to swap it. Here’s a page with three examples, one using pure HTML, one using CSS and one using Javascript.
You’ll probably find it easiest to use the CSS method in Bootstrap Studio, and CSS is the best way in terms of compatibility, reliability and simplicity.