I recently installed the vigor WordPress theme and I wanted to customize my logo. I am looking to have my logo initially displayed in grey scale, but when I hover over it, I want it to change to a colored version. Is there a way to achieve this effect using custom CSS and jQuery in the theme menu? I have both versions of the logo saved as PNG files. Thanks!
Achieving this effect is totally doable! No need for individual PNG images.
You can implement the desired effect using CSS filters along with the following code:
HTML:
<img id="logo" src="http://lorempixel.com/400/200/">
CSS:
#logo {
-webkit-filter: grayscale(100%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(100%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(100%);
-o-transition: .5s ease-in-out;
}
#logo:hover {
-webkit-filter: grayscale(0%);
-webkit-transition: .5s ease-in-out;
-moz-filter: grayscale(0%);
-moz-transition: .5s ease-in-out;
-o-filter: grayscale(0%);
-o-transition: .5s ease-in-out;
}
To achieve a grayscale effect on an image in CSS, you can utilize CSS 3 Filters. Take a look at the code snippet below:
https://jsfiddle.net/1fog16gn/
#sampleImage {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
#sampleImage:hover {
-webkit-filter: grayscale(0%);
-moz-filter: grayscale(0%);
-o-filter: grayscale(0%);
}
Give this a try:
/* swap image on mouseover */
a.Header-branding:hover img {
visibility: hidden;
}
a.Header-branding:hover {
background-image: url(https://example.com/image.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.image-swap {
height: 200px;
width: 200px;
position: relative;
}
.image-swap img {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
transition: opacity .9s;
width: 100%;
height: 100%;
object-fit: contain;
}
.image-swap img.hover, .image-swap:hover img.main {
opacity:0;
}
.image-swap img.hover:hover {
opacity:1;
}
Discover a simple method that doesn't rely on Javascript. Explore the CSS-only technique for creating image animations on hover. For more information, check out:
Recently, I've come across a fantastic jQuery plugin called https://github.com/karlhorky/gray that allows me to easily grayscale images. By simply adding the grayscale class to an image or grayscale grayscale-fade for a hover effect, I can achieve the desired effect without any hassle. This plugin has been a lifesaver for me, especially since CSS filters don't always work on all browsers, particularly Internet Explorer. After testing out numerous grayscale plugins, I can confidently say that this one does the job exceptionally well, and I've been using it in multiple projects.
Hopefully, this information proves to be useful for you as well.
Here is a way to achieve this:
#header:hover {
background-image:url('background-1.png')
}
#header {
background-image:url('background-2.png')
}
My website has a user input field where numbers are expected to be entered. I wanted to find a convenient way to validate the input using jQuery. After some research, I discovered jQuery's built-in function called isDigit. This handy function allows ...
Struggling with responsive behavior in IE8, some parts of my Wordpress website at are not displaying correctly due to issues with the @import query. To tackle this problem, I am considering creating a separate style sheet for IE6, 7, and 8 using the follo ...
When working in an embedded ruby (html.erb) file, I encounter a situation where I have a string of HTML such as variable_string = "<p>Some <strong>Content</strong></p>". In JavaScript, we can easily update the DOM with Element.inn ...
I'm new to utilizing the MUI Grid system and I am currently trying to accomplish a simple task of aligning my 'Cancel' and 'Save' buttons all the way to the right on the screen. Despite browsing through various posts and documentat ...
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <div class="container">Lorem ipsum</div&g ...
I am working with the following code: function exportTableToExcel(tableID, filename = ''){ var downloadLink; var dataType = 'application/vnd.ms-excel'; var tableSelect = document.getElementById(tableID); var tableHT ...
After clicking on a specific icon, I dynamically add a loading message to the DOM. The issue arises when the user clicks twice, resulting in two instances of the loading message appearing simultaneously. How can I ensure that only one "loading..." message ...
I currently have an interactive image-map embedded on my website. Here is the HTML code: <div id="italy-map" class="affiancato verticalmenteAllineato"> <div id="region-map"> <img src="./Immagini/transparent.gif" title="Click on ...
Having trouble getting the 'selected' or 'hover' colors to work for the ListItem component. I've tried setting its classes like this: <ListItem selected button key="home" classes={{ selected: classes.listItemSelected } ...
I'm looking to find a way to calculate the total sum of dynamically added fields and have the result displayed on the page. However, I seem to have hit a roadblock along the way. Here is the code that I'm currently examining and trying to unders ...
I have the following code snippet: <div class="panel-body"> <div class="col-sm-6"> <label class="head6">Business Name : </label><span class="head9">'.$name.'</span> </div> <div ...
In my project with Codemirror version 5.62.3 and the 'monokai' theme set to a dark background, I am facing an issue where upon reloading the page, the CodeMirror initializes as a small white box before the proper styling is applied. I have attemp ...
I've been working on a program for my diving coach that calculates the dive score as judges input their judgments. However, I'm encountering an issue where all fields clear themselves when I hit submit. Moreover, I'd like the ability to save ...
I'm encountering an issue with two tabs in bootstrap. My goal is for the tab color to change from black to yellow when pressed. I have attached 2 screenshots showing the code and design. Thank you. https://i.sstatic.net/GBOSf.png Second https://i. ...
After successfully acquiring the planning details from Teamweek using the API (Get projects from Teamweek in jQuery), I am now looking to feed Teamweek a project. Even though the code below seems to work (based on the response received), I am unable to lo ...
Currently, I am utilizing jQuery UI sliders to input values in text boxes. However, I would like this functionality to be bidirectional; meaning if a value is entered into the text box, I want the slider to move to the corresponding position. I am unsure ...
Is there a way to load all the comments of a specific article when the user clicks on the comments link, using Jquery Ajax without refreshing the page? I've outlined my approach here, but if there's a better method, please share your suggestions. ...
I'm trying to find an answer but can't seem to remember where I saw it. Here's the situation: a horizontal nav bar with a dark blue selection and a red sub-menu. When the user hovers over a black arrow, it crosses into a light-blue nav item ...
I'm facing an issue trying to implement a button that filters events based on their tags. The problem arises when the tag value in the query string parameter does not clear when other buttons are clicked. Instead, the new filter tag value adds up with ...
I am facing an issue with my Ajax script that displays images sent by the admin to clients. The problem is, every time the admin uploads a new image, the script duplicates and sends the image twice. For example, if the admin uploads the first image, it sho ...