Alter bg opacity on hover...

Developer
Size
2,054 Kb
Views
38,456

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

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
Create amazing art & images 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!