Having trouble with CSS hover sliding animation going from top to bottom not activating

I'm trying to create a social hover effect where the background color slides down from top to bottom. I've written the CSS code for it, but for some reason, it's not working as expected.

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}

.socials li.facebok:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>

htmlcss

Answer №1

Below is the functional code provided for your convenience. I have implemented a sliding effect that works for all 3 icons.

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li.twitter {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #00A0D1 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li.dribbble {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #ea4c88 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}
.socials li:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}
.socials li:hover a i {
  color: #fff;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>

Answer №2

An error in the code: please use .socials li.facebook:hover instead of .socials li.facebok:hover

ul.socials {
  display: flex;
  flex-direction: row;
  list-style-type: none;
  font-size: 20px;
}

.socials li {
  padding: 12px;
}

.socials li.facebook {
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, #eaeaea 50%, #3B5998 50%);
  -webkit-transition: background-position 0.5s;
  -moz-transition: background-position 0.5s;
  transition: background-position 0.5s;
}

.socials li.facebook:hover {
  background-position: 0 -100%;
  color: #ffffff;
}

i.fa.fa-facebook {
  color: #3B5998;
}

i.fa.fa-twitter {
  color: #00A0D1;
}

i.fa.fa-dribbble {
  color: #ea4c88;
}
<script src="https://use.fontawesome.com/a2e210f715.js"></script>
<div class="social-wrap">
  <ul class="socials">
    <li class="facebook"><a href="#"><i class="fa fa-facebook"></i></a></li>
    <li class="twitter"><a href="#"><i class="fa fa-twitter"></i></a></li>
    <li class="dribbble"><a href="#"><i class="fa fa-dribbble"></i></a></li>
  </ul>
</div>

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

Choose dropdown menus that are pre-filled by JSON may require a manual refresh to show the content

Occasionally, I encounter an issue with a JSON file used to populate select boxes, where the items in the drop down fail to display until the page is refreshed. Despite no errors in the console or log, the loading is seamless on most occasions, leaving me ...

phpjavascripthtmljsonselect

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 ...

javascriptcssipadextjs

The efficiency of a website that handles numerous files

I'm currently in the process of creating a website that allows users to order a customizable product. The ordering process involves 10 steps, each with various options to choose from. Right now, all the steps are handled in a single file (index.php) ...

phpjqueryhtmlajax

Can the active link color be modified in Bootstrap 5 without the use of CSS?

It's been a while since I've worked with HTML, and this is only my second attempt at creating tabs, so I might be approaching this the wrong way. Currently, the link text in the tabs is in the primary bootstrap color (blue) by default and change ...

htmlnavbootstrap-5

When the start button is pressed, the page will automatically refresh until the stop button is clicked. Learn how to track the duration of the start button press

I have a table of data that I need to continuously update with the latest values from the database. In order to do this, the page automatically refreshes every 10 seconds. The updating process is triggered when the user clicks the start button and stops ...

phphtmlmysql

Align navigation items in the center of the navigation container

I've been grappling with aligning the content of a nav-item inside a nav container in my project. I'm unable to apply a margin on the ul>li items as it doesn't adjust properly on different resolutions. I've tried using percentages, b ...

htmlcssbootstrap-4

Having trouble retrieving the default selected value using the index in Angular Material's mat-button-toggle functionality

I'm encountering an issue with setting the default value for a toggle button group. The code is simple and the toggle buttons are correctly fetching values from the index, but I can't seem to get one of them to be default selected. I tried settin ...

javascripthtmlangularangular-material

Using Inline Font CSS for FontAwesome 5 Unicode Compatibility

I am currently utilizing a library that does not support the font-weight property. Instead, the font style is defined by the font CSS property as detailed here. After trying to set the font style using the font CSS property with FontAwesome 5, I noticed t ...

cssfont-awesome-5

Enhancing the functionality of radio buttons through event changes and optimizing related features

I am searching for a more efficient method to reuse functions that serve a similar purpose. For example, I would like to modify various radio buttons that toggle a hide class on different divs. JSFiddle Link How can jQuery be used to create a reusable fu ...

javascriptjqueryhtml

What is the functionality of client-side applications?

I am new to web development and my programming background is primarily focused on algorithms and creating visualization tools using local Windows forms. I often distribute these tools via email as compiled exe files (C++ or C# win form) to my math students ...

javascripthtmlasp.netwebweb-applications

Background color vanishes (occasionally) on the contact section of my website when viewed in Chrome

My contact page has an issue that only occurs in Chrome, where the background disappears most of the time. This problem is not present in Firefox, Edge, or Safari on my TA's MacBook, but interestingly, hovering over a box resolves the issue on her dev ...

htmlcssgoogle-chrome

Role="presentation" containing a <form> element within

<nav> <ul class="nav nav-pills pull-right"> <li role="presentation"> <form action="/logout" method="POST" id="logout-form"> <a href="#" onClick="document.getElementById('logout-form&ap ...

javascripthtmlbootstrap-4

Ways to refresh a webxr session while clearing all models from the scene

Whenever the webxr session restarts, I notice that two instances of previous objects appear on the screen. I want the screen to be clear when the session restarts. Currently, I am using the following code: for( var i = scene.children.length - 1; i >= 0 ...

javascripthtmlthree.jswebxr

Interactive Text Transformation on Mouse Over

My goal is to create a sleek and clean Index page featuring a simple white background with text centered in the middle. The initial text will be: USEStudio Upon hovering the mouse, the text will transform into: ...

jqueryhtmlcss

Bootstrap Carousel fails to function properly

I have tried everything, even using code directly from ww3 with added cdn. It worked on bootstrap 4 beta, but the rest of my site is using an earlier version. I'm new at this and hesitant to mix versions unnecessarily. <!DOCTYPE html> <html ...

htmlcsstwitter-bootstrap-3carouselbootstrap-4

Troubleshooting: CSS not running in WooCommerce WordPress theme file

I recently set up a Woocommerce plugin on my fully functional custom Wordpress theme by following the instructions in this guide. I copied and modified the page.php file as instructed, renaming it to woocommerce.php. While the Woocommerce functionality wor ...

phphtmlcsswordpress

"Navigate with Ease: Introducing the Twitter Bootstrap Scroll

Having trouble with the twitter bootstrap scroll spy feature as the navigation doesn't update until midway through scrolling and skips item 4 to reach the last item. Check out this example: http://jsfiddle.net/eoboite/kjvAa/38/ What am I doing wrong? ...

javascriptjqueryhtmlcsstwitter-bootstrap

The AddClass function fails to function properly after an ajax form is submitted

I am facing a challenge in setting up validation for my ajax form. My goal is to have a red border appear around the input field if it is submitted empty. Unfortunately, when I try to use addClass(), it does not seem to have any effect. The alert message ...

javascriptjquerycssajaxvalidation

Using CSS/HTML to showcase rows in a vertical table format (or similar)

Can someone please help me with formatting my tabular data in a specific way? column A | column B | column C | column D | ------------------------------------------- 1-1 | 2-1 | 3-1 | 4-1 | ------------------------------------------- 1 ...

htmlcss

Excessive indentation detected within the website's formatting

There seems to be an issue with the mobile version of the website, possibly related to flexbox, SVG, or width settings that are unclear to me. Inspecting with Devtools reveals indents from the SVG and text itself. Check out the website here My goal is to ...

cssflexboxwidthbootstrap-5