By default, Bootstrap’s popover box appears when the user clicks a specific element. However, you can also force this popover message box to appear on mouse hover instead of mouse click. There are two ways to accomplish this tasks.
Method 1: By adding data-trigger attribute to HTML markup
You can make the popover appear on mouse hover by simply adding data-toggle attribute to your HTML element and setting its value to hover.
<button id="pop1" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Sample Popover 1" data-placement="top" data-content="This is first sample popover">Popover 1</button>
Method 2: By passing trigger argument while initialization.
In this method, you can simply pass trigger while initialization of popup and set it to hover.
Basically what we are doing here is we are starting with a margin-top of 200px at 0% to 0px at 100%. In the middle of animation we are changing the width and height of the ball to make it oval while falling down.
As you can see, we are changing background-color on 0, 25, 50, 75 and 100. Also, we are using animation property to trigger the animation on body tag. This property accepts four parameters that are name of animation, duration, iterations and direction.
Note: This effect will work only with web browsers that support keyframe animations.
Hover effects are really exciting and fun topics. In the previous tutorials, we’ve already built image grayscale effect with CSS. In this post, I’ll share code snippets to create a simple and easy to use image zoom effect.
In this example, I’ve written the code in such a way that when a user hovers over the image, the photo enlarges while still staying within the boundaries of div element.
Here’s a tiny piece of code which can used to convert normal images to grayscale. Using the following CSS code snippet you can convert coloured photos to black and white images. However, note that if the user downloads the image, it will be displayed in its original coloured format.