I'm currently working on a menu where each item displays text that is replaced by an email address on hover. However, I am struggling to remove the text during the hover state.
Below is the code I have written so far:
#home {
font: 30px 'LeagueGothicRegular', Arial, sans-serif;
color: #f9f8cc;
}
#home:hover {
background:url(style/images/icon/home.png) #FFF;
background-size: 83px 56px;
}
To hide text using CSS, you can set the text color to transparent. Here is an example of how you can achieve this:
#title:hover {
color: transparent;
background:url(style/images/icon/title.png) #FFF;
background-size: 100px 80px;
}
If hiding the text causes layout issues, you can wrap the text in a div element and hide that instead:
CSS
#title:hover .textDiv {
display: none;
}
HTML
<div id="title">
<div class="textDiv">
Sample Text
</div>
</div>
To make an element transparent when hovering, you can set the color property to transparent.
If you're searching for a different and more straightforward method, just include the following code in your CSS hover container:
font: 0/0 a;
For further details on the font shorthand property, check out: Alternative CSS image replacement technique
If you want to add a touch of elegance to your website, consider using opacity. Here's how you can do it:
HTML
<div id="home">
<div class="yourDivClassThatContainsText">
Text Text TExt
</div>
</div>
CSS
.yourDivClassThatContainsText{opacity:1;}
.yourDivClassThatContainsText:hover{opacity:0;}
To enhance the effect even further, include this .transition class in the same div as 'yourDivClassThatContainsText'. Here is the transition class:
.transition{-webkit-transition: all 0.6s ease; -moz-transition: all 0.6s ease; -ms-transition: all 0.6s ease; -o-transition: all 0.6s ease; transition: all 0.6s ease;}
I hope this information proves helpful for you. Thank you.
I am facing the following issue: HTML: <div id="about" class="menu1"> <a href="#">About</a></div> <div id="aboutsub"> <div id="team" class="menu2"> <a href="">Team</a></div> &l ...
On my website, I have 4 iframes embedded in 4 different tabs. I've noticed that the content is being cropped when viewed on Firefox, but it loads properly when using Chrome. Strangely, if I manually reload the iframe, the content displays correctly. T ...
I'm looking to customize the appearance of my search box. On Stack Overflow, you'll notice the search box is a perfect rectangle. I want mine to have rounded edges, like an ellipse, rather than being rectangular. How can I achieve this look? Than ...
After successfully creating a navigation bar with hover effects, I am now looking to implement a dropdown list when hovering over the items. Can anyone provide guidance on how to achieve this? Below is the current code snippet I am working with: <ul c ...
I have spent hours combing through code after code on this site, trying to center my fixed banner without success. I am feeling frustrated and in need of some assistance. Here is the CSS snippet I have been working with: .heading { position:fixed; ...
I have been working on a login screen and encountered a problem with the layout on smaller devices. Despite centering all the content perfectly on my computer's browser, when I inspect it using developer tools for smaller devices, everything shifts to ...
I am in the process of designing a cheerful birthday card and I need to transfer data from a form to the birthday card page. How can I take information from the first div (which contains the form) and display that data in the second div? <!DOCTYPE ...
Currently, I am working on a project that involves implementing a slider. Since I lack expertise in JavaScript, I opted to use a plugin called owlcarousel. The challenge I'm encountering relates to the sizing of the container for the items. I'm ...
I am experiencing an issue with a webpage where the text appears normal on desktop but is too big on Android devices. Below is the code snippet causing the problem: <!DOCTYPE html> <html> <head> <title>ra ...
I recently created a JSFiddle with buttons. As part of my journey to learn jQuery, I have been converting old JavaScript fiddles into jQuery implementations. However, I seem to be facing a challenge when it comes to converting the way JavaScript fetches an ...
Upon reviewing the Chrome Dev Tools screenshot, I am puzzled by the fact that my CSS assets are being fetched by jQuery. The CSS sheet is included in the normal way, using a <link rel="stylesheet"> tag in the <head> section, while jQu ...
I have a table with 80 rows. How can I make the first row fixed? I attempted to add position: fixed; to the but unfortunately, it didn't work. Is there a way to achieve this using CSS or jQuery? <table> <thead> <tr> <td sty ...
Currently, I am in the process of working on a website that requires a description section. To achieve this, I decided to use two Bootstrap columns – one with a size of 8 and another with a size of 4, totaling up to 12 grid units. Inside the column sized ...
I am currently developing a sidebar using Angular and Flex. The app-sidebar is nested within the Angular component layout shown below: <div fxlayout="row" fxFill> <app-sidebar fxLayout="column" fxFlex="10%"></app-sidebar> <div ...
Hello, I am looking to dynamically display the age in years on the screen based on the value retrieved from selectedPatient.age, toggling between visible and hidden states. import React, { useContext } from 'react'; import { useHistory } from &ap ...
I am currently working on designing a user interface (UI) for mobile screens that includes a header, grid, and buttons. I want the UI to look consistent across all mobile devices. Here are screenshots from various mobile screens: Samsung S5 Pixel 2 XL I ...
Having trouble getting my buttons centered and aligned side by side on the screen. I've managed to achieve one or the other but not both simultaneously. Currently, the buttons are next to each other but positioned at the top left corner of the screen. ...
I understand that for id we need to use the '#' symbol and for class '.' symbol. However, I am unsure of the specific purposes of both class and id in styling CSS. Can someone provide clarification on when I should use id and when I sho ...
I am currently working on implementing a custom CSS transition in my project that is based on Bootstrap 3. The setup consists of a simple flex container containing an input field and a select field. The functionality involves using jQuery to apply a .hidde ...
Looking to style a ToggleButton like a button? Having trouble with an error in the console when nesting a button inside? Check out this solution: const StyledToggleButtonGroup = withStyles((theme) => ({ grouped: { margin: theme.spacing(0.5) ...