Is it possible to change the color of an image on hover by applying a filter like brightness(10)? I tried this, but it whitens all the button, so now I'm not sure how to change the icon color.
https://i.sstatic.net/nJL1i.gif
One way to do it is:
<div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>
<style>
.hello {background-color: #eeeeee;color: #4171af;font-size: 20px}
.hello:hover{background-color: #4171af; color: white;}
</style>Enhance the image with a filter:
.hello {
background-color: #eeeeee;
color: #4171af;
font-size: 20px
}
.hello:hover {
background-color: #4171af;
color: white;
}
.hello:hover img {
filter: brightness(150%);
}<div class="hello"><img src="https://i.ibb.co/HBbfCGF/play.png">bouton</div>If you're looking to add some flair to your website, I suggest creating a second image file and using JavaScript to change the image source attribute on hover. This will not only brighten up your design but also allow for more creative possibilities beyond just adjusting brightness levels.
While it may seem like a simple task, let me walk you through it step by step. Since you're already familiar with basic CSS hover effects, I'll focus on the JavaScript aspect.
Your HTML structure likely resembles the following (with a added class to the img tag and a link to the JavaScript file):
<div class="hello">
<img class="play" src="https://i.ibb.co/HBbfCGF/play.png">
<span>Button</span>
</div>
<script src="script.js"></script>
To achieve the desired effect of changing the src="" attribute of the <img> tag upon hovering over the entire <div>, you'll need to utilize the addEventListener() and setAttribute() methods.
let hello = document.querySelector('.hello');
hello.addEventListener('mouseover', function(){
let img = document.querySelector('.play');
img.setAttribute('src', 'path/to/the/second/file.png');
});
hello.addEventListener('mouseout', function(){
let img = document.querySelector('.play');
img.setAttribute('src', 'https://i.ibb.co/HBbfCGF/play.png');
});
I am currently working on an app for a company directory that will help the company manage its employees, departments, and locations. This app is designed to allow users to make changes to the database only after confirming their actions. The app successfu ...
I am facing an issue with my express.js server template. A 'x is not defined' error keeps popping up, but I can't seem to find where the problem lies. I even checked a friend's code from the same tutorial, and it works on his machine. ...
I'm feeling a bit lost when it comes to DOM nodes and all the terminology surrounding them. Initially, I believed that the DOM consisted solely of what I could see in my inspector - nothing more, nothing less. However, I've come across functions ...
After coming across an article highlighting the negative impact of using excessive HTTP requests on server speed, I started wondering about the performance implications of PHP includes. Specifically, I'm curious if sending 4 AJAX requests compared to ...
I am trying to customize the label of a smui/slider in a tick marks and discrete slider. While I found instructions on how to do this using material web components at https://github.com/material-components/material-components-web/tree/v13.0.0/packages/mdc- ...
My data is in a comma-separated format: "HotelName","Remained","Date" "Maxx","4","Jun 26 2016" "Voyage","3","Jun 24 2016" I am looking to convert this into a JSON array as shown below. How can I achieve this using my JavaScript code? [ { HotelName ...
I'm currently facing an issue where despite successfully retrieving the latitude and longitude values from the geolocation feature in Google Chrome, I am unable to pass these values to the index function within the controller named Add. When attemptin ...
I am facing an issue with the login process, specifically getting a TypeError: Cannot read property 'id' of null error message. How can I debug and resolve this error? var cas = require('cas-client'); get_forward_url(function(forwardur ...
It seems like I've tangled myself up in a web of confusion. I'm trying to have three identical dropdowns on a single page, each displaying clocks from different cities (so users can view multiple clocks simultaneously). However, whenever I update ...
Here is an example string: "/city=<A>/state=<B>/sub_div=<C>/type=pos/div=<D>/cli_name=Cstate<E>/<F>/<G>" The characters A, B, C, and so on are variables, and their count is not fixed. Can you determine how many ...
Encountering issues with the raty js plugin while working on Rails version 5.0. jquery.raty.self-628421be04f36f7a8fa8b9b884c6d7824d6f8bdeba4f172b131f15aa63f713e8.js?body=1:761 Uncaught ReferenceError: jQuery is not defined at jquery.raty.self-628421be ...
My goal is to implement the solution provided in TypeScript from Stack Overflow: UPDATE 2 - The issue with the original answer is that it does not support a single deferred. I have made modifications to reproduce the error in his fiddle. http://jsfiddle.n ...
Currently, I am in the process of creating a mobile application using expo and react-native. One of the features I am working on involves generating a passphrase for users on a specific screen. To achieve this task, I have integrated the react-native-bip39 ...
As I embark on creating a basic application in WebGl and JavaScript following online tutorials, I encountered a peculiar issue while working on some fundamental shaders. The function responsible for generating the shader program presents itself as follows: ...
After making substantial edits to this question, I find myself in need of a reset button for the code. The current item needs to be reset back to 1 so that I can use it again, but the issue lies in the fact that only the current item is reset while the hig ...
"dependencies": { "ant-design-vue": "^1.7.2", "bootstrap": "^4.6.0", "core-js": "^3.8.3", "nuxt": "^2.14.12", "popper.js": "^1.16.1" } ...
Trying to bind a value into ValidationErrors. Having this method: isUniqueEmail(control: FormControl): ValidationErrors { if (control.value != null) { console.log(control.value) if(control.value == this.foundEmail){ console ...
Incorporating Vue-Router and Vuex, I have successfully implemented a Users Profile Component that fetches user information by extracting the username parameter from a router-link. For example, <router-link :to="{name: 'user', params: { usernam ...
In the design, I have both gray and blue stars displayed multiple times on the page. What I'm trying to achieve is that when a user clicks on a gray star, it should switch to blue, and vice versa. However, the current issue I'm facing is that cli ...
As a newcomer to coding, I am currently working on a project that involves changing the color of buttons when they are clicked. Specifically, I want it so that when one button is clicked, its color changes, and when another button next to it is clicked, th ...