Alter bg opacity on hover...

Developer
Chris Boon
Size
2,054 Kb
Views
38,456
  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,456
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
Pan image on mousemove
Cursor transitions on click
Moving background-image on mousemove
Chrome flexbox bug - not redrawing when window height reduces
On The Move UI
Text-transform is presentational
Response to stack-overflow question
Chrome flexbox bug - breaking layout when repainting
Scaling Enumeration
Temporary example for Julie
Create amazing sales emails 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!