Tips for concealing overlay when the cursor hovers

Can anyone help me with a code issue I'm having? I want to hide an overlay after mouse hover, but currently it remains active until I remove the mouse from the image. Here is the code:

.upper {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;}
.maine:hover .upper {width: 150%; height: 150%;}
.maine {position: relative; overflow: hidden;}
.upper:after {width 0; height: 0;}
<div class="col-md-2">
  <div class="maine">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive">
    <div class="upper"> heading </div>
</div>
</div>

javascriptjqueryhtmlcss

Answer №1

Check out this unique solution that achieves the desired effect without utilizing @keyframes.

.element {position: relative; overflow: hidden;}
.box {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;}
.element:hover .box {width: 150%; height: 150%; opacity: 0; }
<div class="col-md-2">
  <div class="element">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive">
    <div class="box"> content </div>
</div>
</div>

If you need the heading to remain visible as part of the solution..!

.element {position: relative; overflow: hidden;}
.box {position: absolute; top: 50%; bottom: 0; left: 50%; transform: translate(-50%, -50%); width: 0px; height: 0px; overflow: hidden; background: #ddd; transition-property: width, height; opacity: 0.5; transition: .4s ease; border-radius: 100%;}
.element:hover .box {width: 150%; height: 150%; opacity: 0; }
.heading {position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; padding-top: 30%; text-align: center; display: none; transition: all .2s linear !important;}
.element:hover .heading {display: block;}
<div class="col-md-2">
  <div class="element">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive">
    <div class="box"></div>
    <di class="heading"><h2>Heading</div>
</div>
</div>

Answer №2

You have two options for achieving this effect: you can either utilize keyframes or implement the following solution:

.maine:hover .upper:active,
.maine:hover .upper:focus,
.maine:hover .upper:hover {
  opacity: 0;
}

Answer №3

One possible solution is to implement an animation.

.upper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.upper-background {
  position: absolute;
  width: 0%;
  height: 0%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: 50% 50%;
  border-radius: 100%;
  background-color: rgba(251, 251, 251, 0.5);
}

.upper-inner {
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  opacity: 0;
}

.maine:hover .upper-background {
  animation: expand 0.6s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.maine:hover .upper-inner {
  animation: showText 0.3s ease;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
}

.maine {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

@keyframes showText {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes expand {
  0% {
    width: 0%;
    height: 0%;
  }
  95% {
    width: 150%;
    height: 150%;
  }
  100% {
    width: 150%;
    height: 150%;
    opacity: 0;
  }
}
<div class="col-md-2">
  <div class="maine">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive">
    <div class="upper">
      <div class="upper-background"></div>
      <div class="upper-inner">NAME</div>
    </div>
  </div>
</div>

Answer №4

To eliminate the overlay effect, simply delete the transform property from the .upper class

.upper {position: absolute; top: 50%; bottom: 0; left: 50%; width: 0; height: 0; overflow: hidden; background: #ddd; opacity: 0.5; transition: .2s ease; border-radius: 100%;}
.maine:hover .upper {width: 150%; height: 150%;}
.maine {position: relative; overflow: hidden;}
.upper:after {width 0; height: 0;}
<div class="col-md-2">
  <div class="maine">
    <img src="https://www.w3schools.com/howto/img_avatar.png" alt="Avatar" class="img-responsive">
    <div class="upper"> heading </div>
</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

The Net Core controller did not receive the ajax data as expected

My ajax call seems to be having an issue as the data is not getting passed to my controller correctly. Ajax $.ajax( { url: 'Playlist/AttachVideoToPlaylist', contentType: "application/json; charset=utf-8&q ...

jqueryajaxasp.net-core-mvc

Exploring the Depths of Multidimensional JSON Arrays in PHP

I am currently working on developing a web-based file manager that allows me to organize, view, create, edit, and delete folders and files. In order to store information about these folders, files, and subfolders, I am in need of an appropriate data struct ...

javascriptphparraysjsonmultidimensional-array

Instruct npm to search for the package.json within a designated directory

Imagine having a folder structure that looks like this: root |-build |-package.json |-src |-foo |-foo.csproj |-foo.cs |-bar.cs |-bin |-... |-foo.sln Now, if you change the current directory to root\src\foo\bin a ...

javascriptnode.jsnpm

Adjusting image size according to browser dimensions

I've been struggling to resize a background image on my Square space website dynamically based on the user's browser window size. If the window width drops below a certain point, I want the image to adjust accordingly while maintaining its aspect ...

javascriptjqueryhtmlcss

React/Redux encountered a roadblock when attempting to iterate through an array stored in the state

Currently, I am delving into the world of React/Redux and have encountered a stumbling block while transitioning one of my single-page web applications to this framework. What I aim to achieve is to populate an array in the initial state of the web app wit ...

javascriptreactjsredux

Looking to include a data-* attribute within a div element for the utilization of a third-party JavaScript library like React or Next.js?

let speed = '{ "speed": 0.2 }'; <div className="section jarallax h-100vh" data-jarallax={speed} style={{backgroundImage: "url('/images/header-bg.jpg')"}} id="home"> </div> <Script src="./js/parallax.js" strate ...

javascriptreactjsnext.js

Learn how to save user input from form fields and text areas into JSON format using Angular

Is there a way to add comments using Angular when a user clicks on a button? Currently, whenever text is entered in the input field or textarea, it disappears and an empty block without any name, country, and comments is displayed. The entered text should ...

htmlangularjsjson

The functionality of a radio button triggering a form submission to different pages is experiencing issues with Firefox

This piece of code is designed to submit a form when a radio button is clicked, and depending on which radio button is selected, the form action should change. While this code works fine in Chrome and Opera, it doesn't seem to function properly in Fir ...

javascriptphp

Component cannot be shown on the screen

<template> <div v-for="corpus in getCorpora" v-bind:key="corpus.id"> <Corpus v-bind="corpus" /> </div> </template> <script> import Corpus from "../components/Corpus"; impor ...

javascriptvue.js

Why is the updated index.html not loading with the root request?

I'm currently working on an Angular app and facing an issue with the index.html file not being updated when changes are made. I have noticed that even after modifying the index.html file, requests to localhost:8000 do not reflect the updates. This pro ...

javascripthtmlnode.jsangularjskraken.js

Browsing through all text on songmeanings.com's HTML files

I am attempting to extract user comments from the HTML of a link using BeautifulSoup. The link in question is: However, I am facing an issue where only the user comments from the first page are being displayed when utilizing a specific code: import url ...

pythonhtmlbeautifulsoup

Loading of local resources is restricted in the Apache web server

I am encountering an issue with my Apache web server on a Raspberry Pi. I need to display graphs using the MPLD3 libraries, which are loaded from the server's folder. When I run my index.php page, I receive a Not allowed to load local resources error ...

phphtmlapacheraspberry-pi

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

Tips for ensuring that all children within a flex-container have equal heights

I seem to be facing an issue with this problem. My goal is to ensure that all the child divs within a flex container have the same height as the tallest child div, which in this case is 100px. Additionally, I want them to be aligned at the center. I&apos ...

htmlcssflexbox

Creating formGroups dynamically for each object in an array and then updating the values with the object data

What I am aiming to accomplish: My goal is to dynamically generate a new formGroup for each recipe received from the backend (stored in this.selectedRecipe.ingredients) and then update the value of each formControl within the newly created formGroup with t ...

javascriptangulartypescriptangular-reactive-forms

Having issues with the onchange attribute in the rails text_field_tag not functioning as

Hey there! I am working on an ajax submitted form that includes only a text_field_tag. My goal is to have the form submit as soon as the user begins typing their search string. Thankfully, bandwidth and lag are not concerns since the application will be ho ...

jqueryruby-on-railsajaxforms

Automatically Assigning a Default Value to a Column Using SEQUELIZE ORM

When fetching data from a database using Sequelize ORM, I need to set a default value. Here is an example of the SQL query: SELECT a.affiliate_id, a.active AS current_state, IF(MAX(cn.contract_id) IS NULL ,0, IF(DATEDIFF(NOW(),MAX(cn.contract_date) ...

javascriptsqlnode.jsexpresssequelize.js

Ways to verify if JSON.parse fails or yields a falsy outcome

Objective: const jsonData = JSON.parse(this.description) ? JSON.parse(this.description) : null When executing the above statement, my aim is to have the ability to parse a value successfully and return null if parsing fails. However, instead of achieving ...

javascriptjsonparsing

Changes in React BrowserRouter URLs are not reflected on the page or components, requiring a manual refresh for them to

Greetings, fellow developers! I have developed an app using React with a remote menu component. Despite trying numerous techniques, I am facing an issue where my URL changes but the components are not rendering on the screen. You can check out the code h ...

javascriptreactjsnavigationreact-router

The alignment of bullets in CSS property list-style-position is off

I'm encountering an issue with aligning the list items. I've been using the CSS property list-style-position: inside; Typically, the bullet points appear outside of the text, like this: https://i.stack.imgur.com/LcVB0.png This doesn't seem ...

htmlcss