Looking to create a smooth text transition effect over a blurred image when hovering?

Check out this link for the code snippet

I'm currently working on a project where I want the image to blur and text to smoothly appear upon hover. However, I am facing an issue where the transition effect ends too soon when I stop hovering, causing the text to become unblurred momentarily.

Even after trying different transition timings and properties, the problem persists. I want to achieve a smooth and professional appearance without the text getting blurred. How do I maintain the transition in and out seamlessly?

I attempted setting the blur to 0 directly on the text, but it did not resolve the issue.

  #site-circle:hover #circle-title {
    -webkit-opacity: 1;
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);

Thinking that the blur might be conflicting, I also tried setting a z-index to 999 with no success.

I am unsure of what I may be overlooking or missing. Any guidance or suggestions would be greatly appreciated.

If you prefer not to click on the StackBlitz link, here is the code snippet:

#link-container a {
  background-image: url(https://i.ibb.co/Sd6kP7T/Screenshot-155.png);
  background-position: top;
  text-decoration: none;
}

#link-container #circle-title {
  margin-left: 47px;
  font-size: 21px;
  color: #dbe8d4;
  font-family: "Josefin Sans", sans-serif;
  opacity: 0;
  /* position: absolute;
            bottom: 0px; */
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

#link-container:hover a {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  transform: scale(1.03);
}

#link-container:hover #circle-title {
  -webkit-opacity: 1;
  opacity: 1;
}
<div id="link-container">
  <a href="#" rel="noopener noreferrer">
    <div id="circle-title">TEXT</div>
  </a>
</div>

htmlcsscss-animations

Answer №1

To create a visually appealing design, consider moving the #circle-title outside of the <a> tag and positioning it over the image using position: absolute;. When applying blur effects to a parent element, the children within will also be blurred by default. Unfortunately, in HTML, there is no direct way to unblur specific text elements.

#link-container {
  position: relative;
  width: fit-content;
}

#link-container a {
  display: inline-block;
  background: url("https://i.ibb.co/Sd6kP7T/Screenshot-155.png");
  background-position: top;
  text-decoration: none;
  width: 160px;
  height: 160px;
  background-size: cover;
  border-radius: 50%;
}

#link-container #circle-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 21px;
  color: #dbe8d4;
  font-family: "Josefin Sans", sans-serif;
  opacity: 0;
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

#link-container:hover a {
  -webkit-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
  -webkit-filter: blur(1px);
  -moz-filter: blur(1px);
  -ms-filter: blur(1px);
  -o-filter: blur(1px);
  filter: blur(1px);
  transform: scale(1.03);
}

#link-container:hover #circle-title {
  -webkit-opacity: 1;
  opacity: 1;
}
<div id="link-container">
  <a href="#" rel="noopener noreferrer"></a>
  <div id="circle-title">TEXT</div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Basic Java HTML parser for extracting CSS attributes

Is there a way to parse the style attribute of a basic <font> tag and then convert it back to simple html attributes? For example, if I have this string <font style="font-family:tahoma;font-size:24px;color:#9900CC;">, is it possible to convert ...

javahtmlcssregexparsing

"Is there a way to switch out div2 with div1 in JavaScript or jQuery while keeping them in the exact same position as div

How can I swap two div elements in HTML by clicking a button, replacing the current div with another div at the same position? .team-intro { margin-top:38%; height:250px; background-color:#7BD2FF; /*background-image:url('images/backgrounds/down ...

javascriptjqueryhtml

Eliminate image of variant's dimensions from the slider on Shopify

I am facing an issue with our Shopify store where duplicate variant images for colors are being displayed on the storefront. Although everything looks fine in the dashboard, the duplication is causing confusion for customers. Shopify support has advised ma ...

javascripthtmlcssshopifyliquid

Text overflow happening in Bootstrap 4 fixed-top navbar

Hey there, I have a question that might sound newbie. I want to create a fixed side navigation bar using bootstrap 4. When I add the 'fixed-top' class, it does fix the position but the text in my navbar overflows and looks messy: https://i.sstat ...

htmlcssbootstrap-4

Conceal the sidebar once user is logged in

I need a dynamic webpage; upon loading the login page, the sidebar should be hidden and the login page should occupy the full width of the page. Once the user successfully logs in, the sidebar along with all components should be displayed. I've attemp ...

javascripthtmlangulartypescriptbootstrap-4

Avoid duplicate form submissions with jQuery

Issue: I am facing an issue with a script that allows users to press the keys C or M to choose an option. However, some users are pressing these keys multiple times even though each option can only be submitted once. Query: How can I prevent users from ...

javascriptphpjqueryhtmlforms

Is there a way to identify when a specific DIV element changes its dimensions without continuously polling for updates? In other words, I am looking for a method to

Running ads on my website has been great, but one of the ads keeps changing the dimensions of the DIV it's in, causing layout issues with other elements on the page. To solve this problem, I need to add an event listener to the specific DIV element t ...

javascriptjqueryhtml

Events in Three.js have an impact on the Document Object Model (

Here's a simple question for you. Is it possible to create click events in a three.js scene that can manipulate the DOM? For example, if an object is clicked in the scene, can it make a panel outside the scene become visible? Thank you! ...

javascripthtmlthree.js

Create a scrollbar that allows for both vertical and horizontal movement within the canvas

I am looking to create a canvas with scroll bars. The canvas is sized at 600 x 800, and the parent div is sized at 200 x 200. My goal is to have both horizontal and vertical scroll bars on the canvas. I've tried using the script provided, but unfor ...

javascripthtmlreactjs

How come the date is not showing up inside the <p> tag?

Check out this snippet of HTML code: <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="bootstrap_4.5.0&bsol ...

javascripthtmlbootstrap-4

Visual Studio Code option missing from Windows file explorer's context menu for opening folders

On most other computers, I have the option to open a folder in Visual Studio Code when I right-click and select different options. However, on my own PC, I can't seem to locate this feature, despite frequently using VSC. It's not a major issue, b ...

htmlwindowsvisual-studio-code

Transfer the data from a post request through routes following the MVC pattern

Encountering an issue when attempting to submit a post form with username and password, as an error stating Cannot POST /validateUser is displayed. The structure of my form is as follows: <!DOCTYPE html> <html> <head> <title> ...

htmlnode.jsmongodbexpressmongoose

Arranging Bootstrap inputs horizontally with lengthy labels

When placing two input fields in a row, such as a drop down menu, with labels of varying lengths, the alignment of the inputs can become skewed. This issue persists even when attempting to add breaks in the code due to unpredictable wrapping behavior at di ...

htmlcsstwitter-bootstrapbootstrap-4alignment

Is there a way to showcase the output of the <div id="height"> on the height of the rectangle?

My Current Project Currently, I am in the process of developing a picture framing calculator using a combination of HTML, CSS, and JavaScript. Functionality of the Calculator For this calculator, users will input values such as: Frame Width (wf): 16 ...

javascripthtmljquerycss

When the user presses either the refresh button or the back button, they will be redirected

After the user presses refresh or uses the browser back button, I need to redirect them to a specific page in order to restart the application. My JavaScript code is as follows: var workIsDone = false; window.onbeforeunload = confirmBrowseAway; function ...

javascriptpythonhtmldjango-nonrel

Struggles with integrating a disappearing navigation bar when scrolling - JavaScript

I've been struggling with a fixed position navbar on my blog and I'm attempting to incorporate basic JS to hide the navbar while scrolling down and have it reappear when scrolling up. You can find the code snippet I'm trying to implement in ...

javascriptjqueryhtmlcss

What is the best way to accurately adjust the position of a flex item?

In the following scenario, where two elements are structured like this: <main style="display:flex; align-items: center;"> <div>1</div> <div>2</div> </main> Is there a way to adjust the position of div 2 ...

htmlcssflexbox

Use CSS to create a fullscreen animation for an element

Is there a way to animate a div element so that it expands to fit the screen when clicked without specifying an initial position? I need the div to be able to adjust dynamically within the screen. .box { width: 80px; height: 80px; background: red; ...

htmlcssanimationfullscreen

After entering the author's name in the text box, I am attempting to showcase a quote, but inexplicably, nothing is appearing. What steps should I take to resolve this issue

Every time I enter the author's name in the text box and hit the button to show the quote, it shows undefined. It appears that my button and textbox are not properly connected. How can I resolve this issue? <!DOCTYPE html> <html lang="en ...

javascripthtmlcssfetch

Shutting down the jQuery pop-up

I am struggling with trying to display this code as a popup on my website. Here is the code I have: <div id="myDialog" title="myTitle"> <div class="table_cell"> <div class="message"></div> </div> <div class="tabl ...

javascriptphpjqueryhtmlyii