Only half of the image is responsive to hover effects

Just starting out with coding and running into an issue... My social media icons are supposed to turn pink on hover using a second image, but for some reason it's only showing up on the bottom half. Any suggestions?

CSS:

a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-position: 5px -20px;
    background-repeat: no-repeat;
}

HTML:

<div class="social"><a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"><center><img src="http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png" hspace="5"></a>
htmlcss

Answer №1

Change the background-position attribute.

background-position: xpox  ypos;

Answer №2

One helpful tip when changing an image based on hover is to ensure the non-hovered state also uses a background image. This way, you can simply switch the background image on hover.

To see an example, check out this JSFiddle: http://jsfiddle.net/dfhsps7d/

<style>
.social {
    background-color: grey;
}
a.twitter {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/wtwitter.png');
    display: block;
    width: 30px;
    height: 30px;
}
a.twitter:hover {
    background-image: url('http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/twitter1.png');
    background-repeat: no-repeat;
}
</style>

<div class="social">
    <a class="twitter" href="http://twitter.com/" title="Twitter" alt="twitter"></a>
</div>

Please keep in mind that the first .social class is used solely for better visibility of the white icon.

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

Creating a clickable color-changing grid: A step-by-step guide

In a grid of size 12 by 12, each corner will be clickable, selecting a 6x3 cell area starting from the corner. The selected cells will change color upon clicking any of the 4 corners. After selecting one corner, the remaining cells (126 cells) will be che ...

javascripthtmlhtml5-canvas

Is it possible to combine the :last-child pseudo-class with the universal selector (*) in CSS or Sass

Here is the code I am currently using: .loken5 * padding-right: 5px .loken5:last-child padding: 0 I am wondering if there is a way in SASS to achieve the same effect with just one '.loken5' tag for saving space. Thank you :) ...

csssass

The footer moves upwards when a file is downloaded

I am facing an issue with my website footer and its CSS styling. #footer { position: absolute; bottom: 0; width: 100%; height:8rem; } The main goal is to keep the footer at the bottom of the page, regardless of the amount of content on th ...

htmlcssangular

Tips for creating a responsive HTML5 form

I am trying to center and make my form responsive. Can you help me achieve that with the code below? HTML5 Code <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html ...

csshtml

How should one properly close off list items?

When I attempted to check the validity of my code on W3 validator, it highlighted errors referencing - No li element in scope but a li end tag seen. This pertains to a bootstrap dropdown menu that I came across in some examples provided by Bootstrap. Coul ...

htmlbootstrap-4

Combining cells for certain entries in an Angular data table

Just starting to learn angular, and here's the scenario I'm dealing with: I have a table consisting of 10 columns. Let's say column 4 contains different status categories like children, teen, young, adult, and senior. When displaying all ...

htmlsqlangulartypescript

Creating a collapsible accordion feature with jQuery using a specific HTML layout: wanna learn how?

I am looking to create an accordion effect with the structure provided below. The goal is to have the corresponding article toggle when clicking on .booklist>li>a, allowing only one article to be open at a time. Can someone assist me with writing thi ...

javascriptjqueryhtmlcss

Having trouble with Firefox not recognizing the linear gradient color in my CSS3 code

I'm working on implementing a linear gradient background using CSS, but I'm facing an issue with Firefox not displaying it correctly. body { height: 100%; /*background-color: #F0F0F0;*/ background-repeat: repeat-x; /* Safari 4-5, Chrome 1-9 */ ...

cssfirefox

Navigate to the specified text in the dropdown menu based on the ul li selection

Is it possible to achieve a functionality similar to that of a select box, where typing a keyword that matches an option in the select box will automatically move the pointer to that option? I am looking to implement a similar feature in my HTML code: < ...

javascriptjqueryhtmlcss

Tips for updating the selected value in Vue dynamically

I am currently working on a feature where the months change dynamically based on the selection made using Vue. You can view the code snippet in the link provided below. <div id="app"> <span class="selectboxWrap"> < ...

htmlvue.js

Utilizing jQuery to effortlessly generate parent and child elements in a single function call

Is it possible to create multiple elements with the same function? Currently, I am able to split a number of list items like this: <ul class="dropdown-menu"> <li>Stuff</li> <li>Stuff</li> <li>Stuff</li> ...

jqueryhtml

Scrolling on an iPhone's Div

When I tried to access a website () using my iPhone and other gadgets, I encountered an issue with scrolling through the content. Clicking on the "Insight" link at the top-left corner led me to another page. On a computer, I had no trouble scrolling smoo ...

jqueryhtmlioscssiphone

Is it possible to target elements based on a specific CSS3 property they use?

Is there a method to target all elements in the DOM with a border-radius other than 0? If anyone has suggestions, it would be greatly appreciated! ...

javascriptjquerycss

Tips for utilizing iemoji on your Edge browser

Here is a snippet of code I'm working with: <option> &#x1F1E9;&#x1F1EA; Deutsch</option> or <option> &#127465;&#127466; Deutsch</option> When I view this on Firefox, it appears as shown in the image below: h ...

htmlemoji

What is the best way to make my button sticky across different screen sizes on my webpage?

I'm having trouble figuring out how to make my purple button sticky and responsive on the right side of the screen as I scroll down. Can someone help me with this? This is the snippet of my HTML code: <Col className="colPre"> ...

htmlcssreactjs

Incorporate a map (using leafletjs or Google Maps) as a subtle backdrop

I am currently working on a one-page website and I would like to include a map as a background behind the "contact" section. The map can be set to float, draggable, or positioned at the back. I have experience using both the Google Maps API and LeafletJS, ...

javascripthtmlcssgoogle-mapsleaflet

Displaying content generated by Html.Raw in MVC4 using JavaScript and AJAX is causing displacement of content within the <a> tags in the HTML

My project includes a feature where emails sent to a specific address are parsed, with attachments saved to the network and metadata stored in a database. If the serial number of a finished good matches the one included in the email, a note is generated an ...

javascripthtmlajaxasp.net-mvc-4

Modify the color of links when hovering using CSS

I am currently utilizing VScode and attempting to modify the link color on :hover. I am also interested in adding a grow Hover Effect. Here is my code snippet: .subareas a.link { margin: 0 0 10px 10px; float: right; height: 30px; line-height: 29 ...

htmlcsshovermousehover

Creating a column in CSS that maximizes width without utilizing 100% or causing text wrap

Trying to keep a three-column div from spilling over the page can be tricky. The first two columns must not exceed 200px, while the third column should be at least 280px wide. The issue arises when there is a table in the third column with long sentences i ...

htmlcss

The JSON data fails to load upon the initial page load

I am having trouble getting JSON data to display in JavaScript. Currently, the data only shows up after I refresh the page. Below is the code I am using: $(document).ready(function () { $.ajax({ url:"http://192.168.0.105/stratagic-json/pr ...

javascriptjqueryhtmljson