Blending images on social media platforms

I'm trying to create a hover effect for my social media icons where one icon fades into another when the mouse hovers over it. I came up with this idea:
HTML:

<div class="socials">
    <img src="../images/fb.png" id="fb1" />
    <img src="../images/fb-hover.png" id="fb2" />
    <img src="../images/twitter.png" id="twitter1" />
    <img src="../images/twitter-hover.png" id="twitter2" />
    <img src="../images/insta.png" id="insta1"/>
    <img src="../images/insta-hover.png" id="insta2" />
</div>

CSS:

/*This is for letting them stack on each other*/
#fb2, #twitter2, #insta2 {
    display:none; 
    position:absolute;
}

/*Fade animation*/
#fb1:hover, #twitter1:hover, #insta1:hover {
    opacity: 0.0;
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
}​

Or check this jsfiddle.

The fading out works correctly. However, the 'background' image (the '...-hover.png' image) isn't showing up. How can I fix this?

Thank you!

Answer №1

By changing the display to block on your #fb2, #twitter2, and #insta2, you'll notice the issue with positioning. A solution would involve absolutely positioning each hover icon under the regular icon, but this may not be very flexible.

Instead, I suggest a more adaptable approach.

Here's the proposed syntax:

<div class="socials">
    <div class="icon">
        <img src="http://sillyquark.com/images/fb.png" class="normal" />
        <img src="http://sillyquark.com/images/fb-hover.png" class="hover" />
    </div>
    <div class="icon">
        <img src="http://www.sillyquark.com/images/twitter.png" class="normal" />
        <img src="http://www.sillyquark.com/images/twitter-hover.png" class="hover" />
    </div>
    <div class="icon">
        <img src="http://www.sillyquark.com/images/insta.png" class="normal" />
        <img src="http://www.sillyquark.com/images/insta-hover.png" class="hover" />
    </div>
</div>

Place each icon in a div with the class of .icon and include two images inside.

Set the .icon div's position to relative to enable absolute positioning relative to the .icon rather than the body element. Adjust each icon's top and left to 0px, add transitions to all images, and specify the width for .icon and img.

.icon{
    float: left;
    position: relative;
    width: 45px;
    height: 45px;
    padding: 20px;
}

.icon img{
    transition: opacity .55s ease-in-out;
    -moz-transition: opacity .55s ease-in-out;
    -webkit-transition: opacity .55s ease-in-out;
    opacity: 1.0;
    position: absolute;
    width: 45px;
    top: 0;
    left: 0;
}

Here's how you can toggle opacities. Under normal circumstances, set .icon .normal's opacity to 1.0 and .icon .hover's opacity to 0.0. On hover, switch the values.

.icon .hover { opacity: 0.0; }
.icon:hover .hover { opacity: 1.0; }
.icon:hover .normal { opacity: 0.0; }

You can view a demo of this implementation on this fiddle http://jsfiddle.net/uUk6N/3/

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

IE rendering issue: jQuery image slideshow captions lack transparency

I recently created a slideshow using jQuery that features fading images with corresponding captions in individual divs. While the captions are meant to have a transparent appearance, I have encountered an issue specifically in Internet Explorer where this ...

Activating the submit button only following confirmation that the image dimensions have been verified

I've written some code that checks whether selected pictures meet specific size and dimension constraints before enabling the submit button. However, there's an issue where the button might be enabled before verifying the last image due to delays ...

Transfer your focus to the following control by pressing the Enter key

I came across a project built on Angular 1.x that allows users to move focus to the next control by pressing the Enter key. 'use strict'; app.directive('setTabEnter', function () { var includeTags = ['INPUT', 'SELEC ...

What is the significance of the source element in Vue3's audio element?

Playing mp3 files works in Vue 2, but not in Vue3. <template> <audio src="../file_example_MP3_700KB.mp3" controls ></audio> </template> In Vue3, the code needs to be modified as follows: <template> <audi ...

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...

I'm looking for a button that, when clicked, will first verify the password. If the password is "abcd," it will display another submit button. If not, it

<form action="#" method="post" target="_blank"> <div id = "another sub"> </br> <input type = "password" size = "25px" id="pswd"> </br> </div> <button><a href="tabl ...

Add a flexible element to a container without disrupting the alignment of the other

I'm facing a challenge in adding an action button to the end of a grid layout without affecting the centering of the items. The button should seamlessly fit into the grid, just slightly offset. If you check out my demo, you'll see what I mean. ...

I am having trouble generating a TikTok page link due to the presence of an @ symbol, although all other links are functioning correctly. Can anyone provide a solution to this issue?

I am currently developing a website using primarily HTML within a Blazor application on Visual Studio. I have encountered an issue with the code where the first two buttons function correctly, but there is an error regarding the @ symbol in the TikTok butt ...

Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

I have implemented the following CSS in an iframe to make it responsive. It works well on desktop browsers, but on mobile browsers, the iframe only displays half of the screen. Can you please review the code below and provide guidance on how to fix this is ...

Timer for searching webpages using Javascript

I am looking for a way to continuously search a specific webpage for a certain set of characters, even as the text on the page changes. I would like the program to refresh and search every minute without having to keep the webpage open. In addition, once ...

Simple Method To Dynamically Align jQuery LightGallery Thumbnails On a Responsive CSS Website

Can anyone assist me quickly? I've implemented everything but am facing a slight issue with the centering of my ul code. I've tried various solutions without success. Here is my code, any advice would be greatly appreciated (I may sound stressed ...

What could be causing my sticky positioning to not function properly when I scroll outside of the designated

My website is organized into sections, with each section corresponding to a hyperlink in the navigation menu. I've applied the CSS property position: sticky to my navbar, which works as expected within the section bounds. However, I want my red navbar ...

Guide to incorporating flash into a form similar to the method used on http://www.mediafire.com

I'm looking to integrate a flash upload feature into my index file, but I'm not sure how to do it. Here is the link to the flash uploader: . I want it to work similar to how uploading works on when you click on UPLOAD. Thank you for any assistan ...

How to Properly Wrap Sub-Menu Elements in WordPress with Div Tags

I am currently working on styling my WordPress sub menu list items using HTML. I have written the HTML code that I want to use, but I am not sure how to incorporate it into the wp_nav_menu() function. Can you assist me with this? <ul class="menu"> ...

Understanding the Code for Responsive Web Typography with line-height in ems

I am currently trying to delve into the CSS calculation process behind the styling in the code snippet provided. This code snippet is from a responsive WordPress theme, and I am struggling to decipher how the em values for the line-height of the <h> ...

Express router is not functioning properly with the static CSS file

My current project involves using Express to create a login application, with EJS as the chosen template engine. The file structure of the application is as follows: package.json server.js routes index.js users.js views layouts.ejs login.ejs ...

Crystal Reports does not recognize or integrate HTML elements

Despite entering HTML text on the field: https://i.sstatic.net/vyvQ2.png Even though I am using valid tags as explained in this resource: What HTML tags are supported in Crystal Reports 2008, my report is not generating HTML but only displaying the tags ...

Unique custom CSS and meta tag options for enhancing iPad/iPhone user experience

Currently, I am developing a web application that integrates Extjs components, PHP, and MySQL. My main goal is to ensure that my application looks correct on the iPad. Are there any specific CSS rules or meta tags that I should be implementing for optima ...

Customizing a responsive background image within a div using Bootstrap 3

Is there a way to style the background image of my header div like the one featured on Mr. Bill Gates' website at ? I noticed that the height of Mr. Bill Gates' header background image remains consistent, even on smaller screens. I've atte ...

Bootstrap card elements are failing to display properly, deviating from the expected

My Bootstrap cards are displaying strangely. Instead of having a border, white padding, and a white background like the examples I've seen, mine look like plain text without any styling. Here is an image for reference: https://i.stack.imgur.com/9MsP ...