Enhance your picture links with a:hover box-shadow styling

I've been struggling to add a box shadow on hover to a Facebook icon image. I assumed it would be straightforward, but as always, I was wrong. I'm working with a child theme in WordPress because I recently started, thinking it would be an easy way to begin. At first, I suspected that the child theme might be causing the issue. However, when I tried using JSFiddle, I still couldn't make it work.

Here's the code from JSFiddle:

http://jsfiddle.net/6P2sB/

HTML

Example 1

<a href="..." target="_blank">
<img class="icon" src="..." alt="facebook icon" align="right" />
</a>

Example 2

<div class="icon">
<a href="..." target="_blank"><img src="..." alt="facebook icon" align="right" />
</a></div>

CSS

.icon {
text-align: right;
box-shadow: none ! important;
border-radius: 7px;
margin-left: 5px;
margin-top: -5px;
margin-right: 10px;
height: 45px;
width: 45px;
}

.icon a:hover {
border-radius: 7px;
box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}

I welcome any suggestions you may have. Thank you in advance!

You can also check out the link here:

hovermouseovercss

Answer №1

The box-shadow effect is being applied to the anchor element, but it should actually be applied to the image when a user hovers over the anchor. Therefore, your code should be updated to resemble the following:

.icon a:hover img {
    box-shadow: 5px 5px 5px rgba(0, 255, 0, 0.1);
}

Answer №2

Your fiddle has been successfully corrected.

I eliminated the following:

: none !important;

This prevented any modifications from being applied, as !important takes precedence over all other styles.

I also updated .icon a:hover to .icon:hover.

Lastly, consider adjusting rgba(0,255,0,0.1) as the opacity of 0.1 may not be noticeable.

I made these adjustments so you can observe the changes.

Check out the DEMO here

Answer №3

style: apply-drop-shadow(0 0 0.75rem black);

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

What could be the reason behind the improper display of JavaScript for ID overlay2?

Why is it that when I try to have two overlays with different messages display upon clicking buttons, they both end up showing the same message? Even after changing the ID tag names, the issue persists. Can someone shed some light on what might be causin ...

javascriptjqueryhtmlcss

What could be causing my wrapper div to not clear properly?

Something seems off with my wrapper div as it's not completely wrapping the children divs vertically. I made sure to clear both of the contained divs but it doesn't seem to be working properly. Any insight on why this might be happening? Check o ...

htmlcss

Issues with CSS transitions/animations not functioning properly across different browsers

Take a look at this FIDDLE Link. I'm facing an issue where the animation works smoothly in Firefox, but it's not functioning as expected in Chrome. Kindly open the fiddle in both browsers (Chrome and Firefox), hover over the image, and notice t ...

htmlcss

Struggling to manipulate the transparency of an image contained within a div element

I am struggling to achieve the desired effect of having an opaque image inside a transparent div. I have tried setting the opacity for both the image and the div, but it doesn't seem to be working as expected. Here is my jsFiddle Link for reference: ...

htmlcssopacity

What is the best way to incorporate keyboard shortcuts into carousel operations using jQuery?

The example can be found here. I want to be able to navigate through the images using the left and right arrows on my keyboard. How can I achieve this using jQuery or CSS? This is the structure of the HTML: <div id="slider-code"> <a cla ...

javascriptjquerycsskeyboard

Tips for hovering over a link with Webdriver

Currently, for my project, I am utilizing Selenium Webdriver. Successfully automating the functionality to mouse over an image has been achieved. However, there seems to be an issue when attempting to trigger a mouse-over event on a hyperlink using the sam ...

javascriptseleniumselenium-webdrivermouseover

Ways to Personalize Navbar in the Bulma Framework

How can I make the <router link> element in my navbar component full width? I'm also looking for keywords related to achieving this layout. Here is an image of the issue: https://i.sstatic.net/2f2b0BcM.png I want a layout that spans the full ...

cssvue.jsvuejs3bulma

My website layout got messed up because of Chrome version 48

Once upon a time, I created a website. Despite its outdated design, it has been functioning properly. Even though I know it's time for something new, I've hesitated to make any changes because it still works. Surprisingly, parts of the page layo ...

htmlcssgoogle-chrome

Converting a data type into a CSS format

Currently, I am in the process of creating a table and would like to implement a 4-color scheme randomly selected from a pool of 10 schemes. Below is my CSS/PHP code: <?php header('Content-type: text/css'); // 0 grey $color00 = '#95 ...

phpcsscasting

Having trouble installing node-sass through npm

Currently, I am attempting to install the SASS compiler node-sass in order to compile SCSS code into CSS code. Despite following an online tutorial and replicating the same steps, I keep encountering errors. npm init --yes : this will generate a json file ...

cssnode.jsjsonsass

Issues with click events in the navigation menu

How can I make my menu close when clicking on other parts of my website, instead of opening? I know that I should use a click event for this, but when I implemented a click event, my menu encountered 2 unwanted problems: 1- Whenever I clicked on a menu i ...

javascriptjqueryhtmlcssmenu

Guide to displaying options in the Vue material select box even when the default value is blank

I have implemented the material design framework vuematerial with vue.js. In traditional HTML, a selection box looks like this: <select> <option value="">You should initially see this</option> <option value="1">One</o ...

javascripthtmlcssvue.jsvue-material

What are some ways to implement webkit-line-clamp on a website?

I'm trying to shorten my paragraph using the following CSS code: white-space: nowrap; overflow: hidden; text-overflow: ellipsis; However, the issue is that it condenses everything into one line. I actually want the text to display on 3 lines before t ...

htmlcsswordpressweb

Text Fade-in Animation with CSS 3

Could someone assist me in creating an animation similar to a marquee using CSS "animation" and "keyframes"? I attempted to move text from top to bottom, but encountered an issue where the text would only restart its movement from the top once it reached ...

csscss-animations

Implementing a collapsible full-width button that contains multiple elements (Bootstrap)

I am currently in the process of developing a responsive calendar that will display additional information in an expandable "well" when the user clicks on a specific event. My goal is to have the button, date, and icon all appear on the same line at full ...

jqueryhtmlcsstwitter-bootstraptwitter-bootstrap-3

Obtain the rotational value in 3D CSS using JavaScript by extracting it from the matrix3d()

My element has been 3D transformed in the following way: .foo { transform: rotateX(-30deg) rotateY(35deg); } Now, I am looking to retrieve these values using JavaScript. Extracting the 3D matrix is simple: var matrix = $('.foo').css('tr ...

javascriptcssmatrix3dcss-transforms

Mobile devices not showing the Navbar bootstrap menu

My header.php works perfectly on desktop, but the navigation bar is not displaying properly on mobile devices. Here is my code: <!DOCTYPE html> <html> <head> <title>International Pvt. Ltd.</title> <meta name="viewpo ...

phpcsstwitter-bootstrap-3menunav

It is impossible to perform both actions at the same time

Is it possible to create a progress bar using data attributes in JQuery? Unfortunately, performing both actions simultaneously seems to be an issue. <div class="progressbar"> <div class="progressvalue" data-percent="50"></div> </d ...

javascriptjqueryhtmlcss

"Utilizing an ellipsis within a span element in a table cell to achieve maximum cell

Update Note: Primarily targeting Chrome (and maybe Firefox) for an extension. However, open to suggestions for a universal solution. Additional Information Note: Discovered that lack of spaces in text for A causing overflow issues with B. Situation seem ...

htmlcss

Basic Hover Effect in Javascript

Looking at this snippet of HTML: <div id="site-header-inner"> <div id="header-logo"> <?php echo wp_get_attachment_image(get_field('header_logo','options'),'full'); ?> </div> <div id= ...

javascriptjqueryhtmlhoverjquery-hover