Fade-In Effect for CSS Background Image

I'm currently learning CSS and I am trying to create an effect where, on hover over some text, the text disappears and an image fades in. I have been experimenting with different methods but haven't quite achieved the desired outcome.

The text is within a link element and on hover, I want to set a background image. While I could use a span within the anchor tag, I prefer the text to be centered within the div, which already has an absolute position.

Below is the HTML code:

<div class="header"> 
  <!--<ul>-->
  <div class="header_element">
    <a title="Home" href="page.php"> Home </a>
  </div>

And this is the corresponding CSS:

    div.header_element {
      display: table-cell;
      text-align: center;
      vertical-align: middle;
      height: 100%;
    }

    div.header_element:hover {
      background-position: center;
      background-image: url("hover.png");
      background-repeat: no-repeat; 
    }

If anyone has any suggestions or solutions, I would greatly appreciate your help. Thank you!

htmlcsshover

Answer №1

To achieve the desired effect, consider using opacity in combination with a fade-in effect.

div.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
}

div.header_element:hover {
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

If this is what you're looking for, check out the jsfidle.

Answer №2

Uncertain if achieving the exact effect you desire is possible. Typically, to create a "fade in" effect, you would animate the opacity of a layer, which affects the entire layer including the background image. One alternative approach could be to separate the image into another layer, like so:

 <div class="header_element">
    <div class="header_background"></div>
    <a title="Home" href="page.php"> Home </a>
 </div>

It may also be advisable to preload the image before user interaction to avoid any visible delay when hovering.

A potential CSS implementation could resemble the following (although not validated):

.header_background {
    transition: opacity 1s;
    background-position: center;
    background-image: url("hover.png");
    background-repeat: no-repeat;
    opacity: 0;
}

.header_element:hover > .header_background {
    opacity: 1;
}

Answer №3

If you want to experiment, try applying the following css code:

.navigation_link{
    background: blue;
    display: inline-block;
}

.navigation_link > span{
    display: inline-block;
    padding: 8px 12px;
}

.navigation_link:hover > span{
    opacity: 0.7;
}

.navigation_link:hover{
    background: url(http://dummyimage.com/80x40/fff/000);
}

Check out the test here: jsfiddle

Answer №4

Your CSS has been updated with the text-indent property, which will hide the text when hovering over a link, displaying only the image instead.

.header_element {
display: table-cell;
text-align: center;
vertical-align: middle;
height: 100%;
}

.header_element a:hover{
background-position: center;
background-image: url("http://dummy-images.com/abstract/dummy-100x100-Rope.jpg");
background-repeat: no-repeat;   
display:block;
text-indent: -9999px;   
}

http://jsbin.com/kexadaqaxu/3/edit

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PNG file unable to display in Google Chrome

I created an image using paint.net and saved it as a .png file. However, when I try to display the image on my website, only the borders show up without any image content. Here is the code I used: HTML <a href="home.php"><img id="logo" src="../i ...

htmlcssimage

The performance of dom-repeat may be impacted when dealing with sizable objects, such as those containing base64 encoded images

Currently, I am encountering an issue while generating a dom-repeat using a list of objects. Each object in the list has an imgUrl key containing a large base64 encoded image. However, when I generate the dom-repeat in this manner, each item appears undef ...

javascripthtmlpolymer

File index with Node.js server for handling files

I currently have a code snippet for setting up a file server that serves files from a static folder named "public1". However, I am facing difficulties in making an HTML page display by default when a user navigates to the IP address in a browser. Although ...

javascripthtmlnode.jsexpress

Manipulating the visibility of components by toggling on click events according to the existing state in ReactJS

Disclosure: I am still getting familiar with ReactJS I'm currently working on incorporating a dialog window for selecting a country/language on the initial page of my application. Here's the concept: There's a small flag button in the to ...

javascriptcssreactjs

Creating a process to produce a random number and send it directly to an automated email

I'm currently utilizing a form builder from jqueryform.com to construct a registration form. My goal is to have each registered user assigned with a unique account number, which will be a randomly generated 6-digit number. Additionally, I want the pro ...

javascriptphpjqueryhtmljson

The hamburger menu unexpectedly appears outside the visible screen area and then reappears at random intervals

My website has a hamburger menu for mobile devices, but there's a problem. When the page loads on a small screen, the hamburger menu is off to the right, causing side scrolling issues and white space. I thought it might be a CSS problem, but after exp ...

javascripthtmlcss

Unable to fetch the data from HTML input field using autocomplete feature of jQuery UI

I am facing an issue with my html autocomplete textbox. Whenever I try to enter an address like "New York" and click on the submit button, it does not retrieve the input value and returns no value. Test.aspx <!--Address--> <div class="form-g ...

c#htmlvisual-studioextract

Starting the description text immediately after the title while maintaining equal width for the title can be achieved by carefully

I need some assistance with formatting a title and description in a specific way. The title should be followed by the description starting on the next line while maintaining the same width for the title. It should resemble the image linked below https://i. ...

htmlcss

What is the best way to conceal a panel using animation.css slide effects in GWT?

After creating a panel using GWT as shown below: VerticalPanel myPanel = new VerticalPanel(); I attempted to add animation CSS to myPanel in order to achieve sliding effects when hiding the panel like this: myPanel.addStyleName("animated slideInRight"); ...

javahtmlcssanimationgwt

Assess how my website is displayed to an algorithm

A website can be accessed not just by a user through a browser, but also by programs, bots, and crawlers. I have a website hosted on Google App Engine with Python that features non-static HTML pages generated by a Python program by manipulating strings. Th ...

pythonhtmlgoogle-app-enginebrowsersearch-engine

When using NextJS, the dynamically generated HTML elements do not get affected by CSS repaint

Recently, I encountered an issue while working on a Next.js project involving the addition of an external script that uses vanilla JavaScript to dynamically create nodes. Despite importing global CSS at the top of my _app.js file, I noticed that the styles ...

javascripthtmlcssreactjsnext.js

Choose a specific div element from a collection of dynamically generated divs in Angular

I have been working on a code to dynamically generate div elements using the *ngFor directive. Here is what I have so far: <div *ngFor = "let item of Items"> <p>Item : {{item}} </p> </div> The challenge I encountered is that w ...

htmlcssangulartypescriptcss-selectors

Activating a certain class to prompt a drop-down action

My PHP code is displaying data from my database, but there's a bug where both dropdown menus appear when I click the gear icon. I want only one dropdown to appear when clicking the gear of a specific project. Can you help me fix this issue? It's ...

javascriptphpjqueryhtmlcss

Designing various paragraphs with unique styles utilizing HTML and CSS

Can someone help me with using the class tag on paragraph tags? I am trying to style a specific paragraph from an external CSS file without affecting all other paragraphs. I've searched online and learned that by adding <p class="somename" >, I ...

csshtmlclassstyles

Triggering the hidden radio button with an OnClick event

I am using the Bootstrap framework to design my user interface. I have a specific requirement where I need to display multiple buttons that function as radio buttons. <div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary a ...

jqueryhtmltwitter-bootstraptwitter-bootstrap-3

What causes the table to expand with new cells once the database information is shown?

I'm confused as to why an empty cell is being added to the right even if there is data from the database to display. This particular code is meant to showcase a school schedule. Attached is a picture showing how it currently appears. Below is the PH ...

phphtml

Changing the click event using jQuery

My JavaScript snippet is displaying a widget on my page, but the links it generates are causing some issues. The links look like this: <a href="#" onclick="somefunction()">Link</a> When these links are clicked, the browser jumps to the top of ...

javascriptjqueryhtml

Is there a unique shape element, such as a true circle, available in HTML5?

There doesn't seem to be any documentation on this, suggesting they may not exist. However, it's always worth investigating. I am in search of a perfectly circular (or any polygon shape other than a rectangle) element. I can create a circle in c ...

htmlcsselementgeometry

Performing a jQuery post request using AJAX and setting the content type

Greetings, here is the code snippet: <script type="text/javascript"> 14 $(document).ready(function() { 15 $('#find').click(function(){ 16 17 var amount = $(' ...

phpjqueryhtmlajaxpost

Using JSON as HTML data within Flexbox for interactive hyperlink rollovers

Utilizing JSON to extract HTML data with unique html tags within Flex has presented a challenge. The limited support for HTML in Flex has made it difficult to implement a basic font color rollover effect on links. While Flex only allows for a few HTML tags ...

htmlcssapache-flexjsonrollovers