How to place button in center of image

Bootstrap Studio Help
1

Hi all,

I want to place a button element on top of an image. My plan is to blur the image and unblur it once the button is clicked, and remove the button once its clicked as well. Does anyone have any good ideas/pointers on how to do this?

HTML

<div id = 'blured_out> static graph <button class="btn btn-primary" type="button">Button</button>

</div>

2

You could use a CSS filter for the blur effect (may have limited support on some older browsers) or probably what I'd do is use two images, one blurred, one unblurred, stack them and use CSS opacity and z-index to hide/show the unblurred imaged on click. You could use CSS animation to time the change, or make the blurred image a link that needs to be clicked to restore the unblurred image. If you want the button to disappear and reappear with the unblurred image, I'd consider making the button part of the unblurred image itself, and make the entire image the link. Then you'd use js to trigger the class change. It might even be possible with pure CSS. I'd have to think about it.

If you want the button to be completely separate from the images, it gets a little more complicated.

You should be able to search for all these kinds of things with Google and Stack Overflow for solutions.

But you're certainly not going to do it with Bootstrap Studio's built-in tools alone.

3

.toggleClass or jquery addClass and .removeClass inside a .click(function (event) { can do the job after you define a .blurred class imho

but even a simpler

.yourimage:hover {
  opacity: .6;
  }

maybe is fine for you

4

It's not entirely clear to what the timeline of events is that this person wants.

  1. Click button.
  2. Image blurs as button disappears then...
  3. Clear image reappears... how? Automatically? When? After a certain amount of time? Does the button reappear as well, or stay gone.

An example of this actual effect would be helpful.