I'm struggling with getting this 2048x512 image, which has 4 stages of transition, to work properly. https://i.sstatic.net/1PBvX.png
While I know how to switch it to the final stage on hover, I can't seem to figure out how to incorporate a transition effect. Can someone help?
#instagram {
width: 512px; height: 512px;
background: url('/host/instagram.png') no-repeat left top;
}
#instagram:hover { background-position: -1542px 0px }
For this specific scenario, transitioning between frames may not be necessary since they all belong to the same color scheme (white, gray, black). A similar effect (though not identical) can be achieved using font-based icons (e.g., Font Awesome) with the transition property and changing their color on hover: jsfiddle
HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
...
...
<div class="icon-circle">
<i class="fa fa-instagram"></i>
</div>
CSS:
.icon-circle {
position: relative;
border-radius: 50%;
width: 512px;
height: 512px;
border: 2rem solid black;
transition: all .8s linear;
}
.icon-circle:hover {
background-color: black;
color: white;
}
.fa-instagram {
font-size: 20rem;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
If you still prefer using images, sprite images can be implemented through CSS animation with the steps() property: jsfiddle
HTML:
<div id="instagram"></div>
CSS:
#instagram {
width: 512px; height: 512px;
background: url('http://andreimartalog.com/host/instagram.png') no-repeat;
}
#instagram:hover { animation: enter 0.3s steps(3) forwards; }
@keyframes enter { 100% { background-position: -1536px } }
I am dealing with a series of div elements structured in the following way: <div id="main1"> <span class="username">Username_1</span> white some text content inside div... blue some text content inside div... yellow some ...
How neat is this code snippet: <div class="container"> <div class="box fade-in one"> look at me fade in </div> <div class="box fade-in two"> Oh hi! i can fade too! </div> <div class="box fade-in three"& ...
It took me some time to figure out that the reason jquery-validate wasn't functioning in my Kendo Mobile application was because my submit button was a Kendo Button. Check out this jsfiddle for illustration: DEMO <div id="phoneApp" style="displa ...
Is there an alternative method to change the app language without refreshing the entire page? The code snippet below always refreshes the page, leading to a poor user experience. window.location.search = "sap-language=EN"; The following code snippet is a ...
I'm struggling with centering the alignment of li elements within a ul. Below is the excerpt from my code: ul.nav { width: 1000px; margin: 0 auto; list-style-type: none; } .nav li { float: left; width: 300px; } #government { clear: left ...
I am currently working on building my Angular application using webpack. To help me with this process, I found a useful link here. In order to configure webpack, I created a webpack.config.js file at the package.json level and added the line "bundle": "web ...
I'm working on a simple webpage that combines jQuery UI and Brython with Python's standard library: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Game</title> ...
Within my script, I have a list controller defined as follows: define([ 'jquery', 'app' ], function ($,app) { app.controller("ListContacts", function($scope,$route,$http){ $http({ method: 'GET&apo ...
Seeking a solution to transfer HTML textarea content into an IFrame upon button click. Any suggestions on achieving this functionality? Thank you in advance. Illustratively, when a user types Hello World in the textarea and clicks the submit button, the t ...
I am seeking a solution to emphasize rows containing the "year" element with a value exceeding "2000" in XML and XSLT. Here is the code snippet: XML <?xml version="1.0" encoding="UTF-8"?> <?xml-stylesheet type="text/xsl" href="harrypotterbooks. ...
Just starting out with JS/JQuery programming, so please excuse any mistakes or unclear explanations. Any feedback is welcome, even if not requested specifically. I am working with multiple drop down lists that are populated dynamically by data from SQL Ta ...
I am attempting to utilize AJAX to submit a form. I send the form to PHP which returns error messages in Json format. Everything works fine if there are no errors. However, if there are errors, I am unable to insert the error message. I am not sure why th ...
Within an Express post endpoint, I am utilizing crypto.generateKeyPair. After generating the key pair, I wish to store it in my database and then return the ID of the inserted row within the same endpoint. Here is the code snippet for the endpoint: app.p ...
As I work on developing a shopping cart, I have successfully stored the total value of the items in the cart in a PHP variable named $total. I attempted to transfer this value into a JavaScript variable labeled Shipping fee. Subsequently, I created a form ...
Here are the codes you requested: <div class="d-flex"> <h1>Hello World</h1> <p class="ms-auto small">Stupid Text</p> </div> <hr class="my-0"> I am attempting to vertically ali ...
Working on implementing email verification using nodemailer for user sign-ups. The process involves sending out an email containing a link (usually something like localhost:3000/verify/?id=##). After the user clicks the link, I can see that a GET request ...
Currently, I am attempting to modify basic CSS attributes within the default theme that is included with a new ASP.NET MVC 5 application in Visual Studio 2013. Specifically, my goal is to change the background color of the navigation menu. With the help o ...
When I used Dreamweaver CS5, XAMPP Server, and PHP files in the past, I encountered an issue. The websites within my htdocs folder seemed to be pulling a specific website's CSS file. In 'Live View,' I could see all external .css and .js file ...
In an effort to implement a unique bidder setting key name within my prebid solution, I have taken the necessary steps as outlined in the documentation by including all 6 required keys. Is it possible to change the key name 'hb_pb' to 'zm_hb ...
In my possession is a JSON representation of an apartment listing: { "_id": { "$oid": "5673d1dcf93fe452d80c2c2c" }, "street": "myStreet", "buildingNumber": 1, "apartmentNumber": 1, "UsersAndQuestions": [ { ...