Create 'focus' circle with blurry background in HTML and CSS

Question

Today i found amazing filter button with 'circle black background' and i really liked it. I want to integrate it in my website to study how to create it but i dont know how to start? Maybe with create circle?

I have created floating button on my site (bottom right corner).You can find it here.When you scroll down to my website, the button will appear.So now i dont know how to create this circle with blurry background like example below?

My floating button

Sorry for my bad English!

https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius — Mister Jojo, Apr 09 '21 at 18:01

Francesco Lisandro · Accepted Answer · 2021-04-09T19:07:40.623

2

I just created a playground for you here https://jsfiddle.net/rxnc3zb7/. In general I added the following:

width:400px;
height:400px;
bottom:-150px;
right:-150px;

to the .go-top:hover. Set width, height, bottom and right values according to your needs. I've no tested it with the icon but I think you should hide it on hover (so .go-top:hover i {opacity:0}). But, if you want to center it you should set .go-top like this:

display:flex;
align-items:center;
justify-content:center;

In this way your icon will be aligned in any case.

Blur effect

For the blur effect I added a js code that simply add the class blur-content to the content container (in the example is .content) when the mouse is over on .go-top and remove it when mouse is out.

$('.go-top').hover(function(){
    $('.content').addClass("blur-content");

},function(){
    $('.content').removeClass("blur-content");
})

Additionally, I defined the blur-content class like this:

.blur-content{
  filter:blur(3px);
}

edited Apr 09 '21 at 19:07

answered Apr 09 '21 at 18:15

Francesco Lisandro

700
4
14

Thats a really good example but ca you make background blurry? – Nikola Marinov Apr 09 '21 at 18:45
I just updated the playground to https://jsfiddle.net/rxnc3zb7/ adding the blur effect and the reply to explain it. – Francesco Lisandro Apr 09 '21 at 19:08
Hi! Sorry for asking again but is it possible to open orange circle when page is loaded? – Nikola Marinov Apr 09 '21 at 20:09
Yes, you can add the class directly in the $(document).ready function and it will open it as soon as the document is ready (so the page is fully loaded). – Francesco Lisandro Apr 09 '21 at 20:49
which class? go-top is already added because it is implanted with hover , i want to display orange circle without hover the button – Nikola Marinov Apr 09 '21 at 20:53
Take a look at this https://jsfiddle.net/84rthpw0/1/ I added a new class called on-hover and removed the maximize effect on :hover. Then I added the classes addition in the document ready – Francesco Lisandro Apr 09 '21 at 20:56

score 0 · Answer 2 · answered Apr 09 '21 at 18:34

The basic idea would be something like this. You can use CSS further to make it look more elegant. These applications generally have an Overlay in place which reacts to user button click or hover and display it.

You can use the below link to blur out your page contents or something similar Full Page Blur in CSS

onBtnClick = ()=>{
document.getElementById("idBgOverlay").classList.toggle("overlayDisp");
}

.fullBg{
  width:100%;
  height: 300px;
  background:orange;
}

.mybutton{
  border:none;
  border-radius: 50%;
  color:#000;
  background:#fff;
  width:3rem;
  height:3rem;
  font-size:2rem;
  z-index:2;
  position:absolute;
}

.bgOverlay{
  background:#101010c7;
  position:absolute;
  height:13rem;
  width:13rem;
  border-radius:50%;
  top:-2rem;
  left:-2rem;
  display:none;
}

.overlayDisp{
  display:block;
}

<div class="fullBg">
   <div id="idBgOverlay" class="bgOverlay"></div>
  <button class="mybutton" onclick="onBtnClick()"> + </button>
 
 <div>

Create 'focus' circle with blurry background in HTML and CSS

2 Answers2

Linked