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 checkbox generated from the JSON is failing to display the alert when it is clicked

I have been trying to pass checkbox input from JSON into HTML. When I click on the checkbox, an alert should pop up, but it's not working. Here is my code: $aroundCheck='<div id="content">'; foreach ($checkLocation as $checkLocation) ...

javascriptjqueryjsoncheckbox

Chaining inheritance through Object.create

Recently, I decided to experiment with Object.create() instead of using new. How can I achieve multiple inheritance in JavaScript, for example classA -> classA's parent -> classA's parent's parent, and so on? For instance: var test = Objec ...

javascriptobjectinheritanceormecmascript-5

Can the dashstyle be configured for a solid-gauge chart in Highcharts?

I am having trouble making the border dashed on my pie chart. It seems that the solution provided for solidgauge charts is not working as expected. Interestingly, the graph property is undefined for solidgauge charts. I wonder if the dashed style could be ...

javascripthighchartsborderpie-chart

I am looking to transform col-sm-4 into two evenly sized columns with one row at the bottom using Twitter Bootstrap

Hello there, I have successfully created three columns in one row with column sizes of col-sm-4 each. Each column is further split into two equal sections and includes a footer row. You can see the alignment in the image below: Check out this sample align ...

htmlcsstwitter-bootstrap

Presenting JSON data in a table format on-the-fly even without prior knowledge of the data's structure or field names

When working with my application, I will be receiving data in JSON format and I am looking to showcase this data in a tabular form within a web browser. It's important to mention that I won't know beforehand the structure or field names of the re ...

javascriptjqueryhtmlangularjsjson

The navigation menu dissolves into hiding at the uppermost part of the page upon scrolling upwards on iOS devices

I am currently working on creating a navigation menu that will automatically hide when scrolling down and reappear when scrolling up. This functionality works perfectly fine on desktop and Android browsers, but I have encountered an issue specifically with ...

javascripthtmlioscsstwitter-bootstrap

Encountering an issue when trying to run npm run dev-server on Windows 10

Having trouble running the dev-server for superset-frontend. Encountering this error message. Any assistance would be greatly valued.https://i.stack.imgur.com/zsVU4.png ...

javascriptnpmapache-superset

Dynamically add a plugin to jQuery during execution

After installing jQuery and a jQuery-Plugin via npm, I am facing the challenge of using it within an ES6 module. The issue arises from the fact that the plugin documentation only provides instructions for a global installation through the script tag, which ...

javascriptjquerynpmbootstrap-select

Animate your SVG with CSS using hover effects that originate from the center of the SVG

I successfully implemented this animation using GSAP and you can view the Codepen for reference: https://codepen.io/whitelionx/full/vYGQqBZ const svgs = document.querySelectorAll("svg"); svgs.forEach((svg) => { const tl = gsap .timelin ...

cssanimationsvghover

What is the best way to have the sidebar of a webpage slide out over the main body content that is being displayed?

Issue Summary I am experiencing an issue with the positioning of my sidebar, which is initially located 66% offscreen using -translate-x-2/3. The sidebar is meant to be pulled into view onmouseover, however, the main body content remains stuck in place. I ...

javascripthtmltailwind-css

Error message: Vue warning - The prop "disabled" must be a boolean type, but a function was provided instead

I have this code snippet that I am currently using <v-list-item> <v-btn @click="onDownloadFile(document)" :disabled=getFileExtention >Download as pdf</v-btn > < ...

javascriptvue.jsvuetify.js

Preventing the triggering of events or functions while utilizing angular-gantt

Currently, I am utilizing the Angular directive called angular-gantt to create a gantt chart that displays tasks. Among the various options available, the ones I am focusing on are on-row-clicked, on-task-clicked, and on-task-updated. The issue I am facin ...

javascriptangularjsangularjs-directive

Suggestions for dynamically labeling input information

Explaining this concept with words can be tricky, so I'll attach a photo for clarification. Let me elaborate. Your understanding would mean a lot to me. Once all the parts within the circles are checked, When you click the "checked" button, I aim ...

jqueryajaxjsp

How can the border of the select element be removed when it is active in select2

After examining the CSS code, I am still unable to locate the specific property that is being applied to the main element. I am currently customizing the select2 library to suit my needs. However, I am stuck in the CSS as I cannot determine which property ...

javascripthtmlcssangularjsangularjs-select2

Generate an HTML webpage with dynamic content using MySQL

How can I display data from a MySQL table on an HTML page? The content in my table includes various rows that I would like to show separately on the web page. This is the structure of my table: I envision the web page layout to showcase each row individ ...

phphtmlmysql

Ensure that both tables contain columns of equal size

I am facing a challenge with 2 HTML tables that are positioned directly on top of each other. Each table has the same number of columns, however, the text within them may vary. Additionally, both tables can consist of multiple rows. My goal is to ensure th ...

htmlcss

Struggling to locate an element with jQuery's closest() method?

Currently, I am utilizing jQuery and Ruby on Rails for my project. Within a table with 3 columns, there is a form element in the form of a select box that utilizes AJAX to submit the result. My goal is to change the color of a check mark by adding or remov ...

jqueryruby-on-railsjsonajax

How can you use the :not selector in CSS to target specific elements within a group?

Consider the following set of inputs: <div id="group"> <input id="uno" class="red"></input><br/> <input id="dos" class="red"></input><br/> <input id="tres" class="blue"></input><br/ ...

javascriptjqueryhtmlcssselector

Exploring the combination of MVC with Ajax.BeginForm and DIV.Load

I have a template that defines an Ajax.BeginForm. The model returned contains a property called ReportLink which holds the URL to a PartialView on the server. In the Ajax.BeginForm.OnSuccessFunction, I am trying to retrieve and load HTML content using $(" ...

c#jqueryajaxasp.net-mvcasp.net-mvc-4

Generating a container DIV with loops and ng-class in AngularJS

Currently, I am working on developing a dynamic timeline using AngularJS. To populate my timeline, I have successfully configured the data fetching from a JSON file. You can see what I have accomplished so far on PLNKR: http://plnkr.co/edit/avRkVJNJMs4Ig5m ...

javascriptangularjswrappertimeline