I've implemented social buttons that change the image on hover and it's working perfectly.
<a href="#">
<img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb "/>
</a>
This is my CSS:
.social-fb:hover {
content:url("http://i.imgur.com/bU0lzac.png");
}
Now I would like to add animations to it. How can I make some animations so that when I hover and the image changes, there's a smooth transition effect? Any animation suggestions are welcomed. Thank you!
To create a pulsating effect, you can implement the following CSS code:
.social-fb:hover {
content: url("http://i.imgur.com/bU0lzac.png");
-webkit-animation-name: pulse;
animation-name: pulse;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
@keyframes pulse {
from {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
50% {
-webkit-transform: scale3d(1.05, 1.05, 1.05);
transform: scale3d(1.05, 1.05, 1.05);
}
to {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
.pulse {
-webkit-animation-name: pulse;
animation-name: pulse;
}<a href="#">
<img src="http://i.imgur.com/TLGeYXo.png" class="social-icons social-fb " />
</a>
<a href="#">
<img src="http://i.imgur.com/bU0lzac.png" />
</a>If you're interested in adding some animations to your website, I've created a simple rotating animation here
One key tip is to use the transition attribute before defining the hover state:
.social-fb{
transition: 750ms ease-in-out;
}
The duration of the animation can be adjusted with the 750ms, while using ease-in-out for smoother and more realistic effects.
You can then specify the transform/animation you want, such as rotating an icon by 360 degrees:
.social-fb:hover {
content:url("http://i.imgur.com/bU0lzac.png");
transform: rotate(360deg);
}
Consider utilizing Font Awesome icons instead of images for elements like Facebook icons. They are free, scale perfectly, load faster than images, and allow for creative transitions between colors. Check out this pen for an example: Font Awesome Pen
Exploring the use of the data attribute with jQuery for the first time, I am attempting to reorder an element based on its data-order attribute. I am struggling to retrieve the correct value of the data-order attribute as it keeps returning 'undefine ...
please add an image description hereI am attempting to populate the data in an HTML table using jQuery, but all columns are showing as undefined errors HTML: <table id="example" class="table table-striped" style="width:100%&quo ...
Is it possible to modify this specific code so that a hover effect is triggered on mouseover? I attempted to look into similar questions and answers, but I found them difficult to understand. Here is the HTML snippet: <a href="RR.html"><img src ...
Having a basic knowledge in JavaScript, I am attempting to extract data from users and utilize it as JSON properties in the following format: <th colspan="2"><input id="dc_name" name='dc[name]'></input></th> $ ...
I managed to successfully integrate geo-location on my website while testing it on localhost. But, when I uploaded the website to an online server, I encountered a problem. I started receiving a bool(false) error message. Geo.php <?php class G ...
Having trouble with my Google Places search integration in Angular 2. <input type="text" type="text" class="form-control" placeholder="Address" [ngClass]="{active:signupSubmitted && !signUpForm.controls['formatted_address'].valid}" [ ...
I am facing an issue with a random Flash video player (that I can't specify because it was obtained from a previous website). It functions perfectly on Chrome, FF, and IE9+, but when I attempt to use it on IE8 or IE7, I only see a black screen with n ...
Struggling with setting custom styling for a mat-table in Angular Material. I want to adjust the border radius of the table and change the spacing inside to "space-between". The design I'm aiming for is shown here: Design Any tips or suggestions woul ...
There is a button on my page with multiple data attributes, and I am trying to hide it by selecting it based on its class and two specific data attributes. <a href='#' class='wishlist-icon' data-wish-name='product' data-wi ...
In my appBar component, I have three buttons that appear fine on large screens. However, when the screen size reaches 400px, they start stretching out of the appBar. Here is how they look on large screens: https://i.sstatic.net/l3nJM.png And this is how ...
I am interested in creating links to hidden content using a show/hide JavaScript. Within the hidden content, there are three divs containing videos and text that I would like to link to. For example, linking to the "example" div as shown below. The links d ...
A selectpicker I have is filled with various languages, listed as `li` tags within a `ul` tag. You can see an example in the image provided below. https://i.stack.imgur.com/dsg66.png It's noticeable that the `+ Add Language` option in the selectpick ...
The alignment of the list element is off-center in Internet Explorer, whereas in Chrome it is perfectly centered. Below is a snippet of the code being used with the Bootstrap CSS Framework. Here is the JSfiddle https://jsfiddle.net/8cunpsvy/ ...
My code is not functioning properly and I'm unsure of the reason behind it. Ideally, I would like all errors to be displayed in a modal dialog box. However, currently, I am unable to get it working correctly. Any assistance on this matter would be gre ...
HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation_desktop"> <div class="button_desktop_01">1.0 Main Menu <div class="SlideItem ...
I've been attempting to change an iframe's src attribute using jQuery, but for some reason, the code isn't working as expected. The alert also fails to pop up. JS: <script src="../Scripts/jquery-1.11.0.js" type="text/javascript">< ...
On my Angular website, I am looking to reuse a component across more than 30 pages. While the majority of the pages have similar CSS, the content inside varies. I know I can simply insert <app-example></app-example> on all the pages, using < ...
I am looking to add a sidebar that opens a new view without navigating to a different page. The sidebar remains consistent and I want to avoid duplicating it on all pages. Check out this photo for an example. My goal is to provide additional content or fe ...
Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...
I am encountering an issue with adding comments from HTML form elements to an array in AngularJS. Whenever I try to use the Javascript push function, I receive an error stating "property of object doesn't exist". Can someone assist me in resolving thi ...