Alter bg opacity on hover...

Developer
Chris Boon
Size
2,054 Kb
Views
38,437
  1. Alter bg opacity on hover... Previews
  2. Alter bg opacity on hover... HTML Codes
  3. Alter bg opacity on hover... CSS Codes

How do I make an alter bg opacity on hover...?

...without rewriting the rgb part. This was an answer to a question on stack overflow: http://stackoverflow.com/questions/6962432/is-it-possible-to-change-only-the-alpha-of-a-rgba-background-colour-on-hover/16910152#16910152. What is a alter bg opacity on hover...? How do you make a alter bg opacity on hover...? This script and codes were developed by Chris Boon on 16 November 2022, Wednesday.

Alter bg opacity on hover... Previews
IQ Test

Alter bg opacity on hover... - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Alter bg opacity on hover...</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>Works on white bg only:</p>
<div class="image_method">translucent 1px gif gets removed on hover</div>
<p>Works on white bg only:</p>
<div class="shadow_method">similar but removes a box-shadow on hover</div>
<p>Works on everything:</p>
<div class="before_method">background created as psuedo-element and it's opacity changes on hover</div>
</body>
</html>

Alter bg opacity on hover... - Script Codes CSS Codes

div{ width:100px; height:100px;
}
.image_method{ background-color: rgb(118, 76, 41); background-image: url(https://upload.wikimedia.org/wikipedia/commons/f/fc/Translucent_50_percent_white.png)
}
.image_method:hover{ background-image:none;
}
.shadow_method{ background-color: rgb(18, 176, 41); box-shadow:inset 0 0 0 99999px rgba(255,255,255,0.2);
}
.shadow_method:hover{ box-shadow:none;
}
.before_method{ position:relative;
}
.before_method:before{ display:block; content:" "; position:absolute; z-index:-1; background:rgb(18, 176, 41); top:0; left:0; right:0; bottom:0; opacity:0.5;
}
.before_method:hover:before{ opacity:1;
}
Alter bg opacity on hover... - Script Codes
Alter bg opacity on hover... - Script Codes
Home Page Home
Developer Chris Boon
Username chrisboon27
Uploaded November 16, 2022
Rating 3
Size 2,054 Kb
Views 38,437
Do you need developer help for Alter bg opacity on hover...?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Boon (chrisboon27) Script Codes
Name
DDCP homepage tiles
Cursor transitions on click
Scaling Enumeration
Chrome flexbox bug - not redrawing when window height reduces
Chrome flexbox bug - breaking layout when repainting
Response to stack-overflow question
On The Move UI
Moving background-image on mousemove
HOM Date Calculator
Temporary example for Julie
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!