CODEWITHSUNDEEP
javascripthtmlcss
Nikola Marinov
Nikola Marinov

Reputation: 263

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

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?

enter image description here

My floating button enter image description here

Sorry for my bad English!

Upvotes: 0

Views: 1564

Answers (2)

Francesco Lisandro
Francesco Lisandro

Reputation: 720

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);
}

Upvotes: 2

Anand
Anand

Reputation: 408

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>

Upvotes: 0

Related Questions