How can I add a hover effect to icons with CSS? [closed]

Question

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.

Closed 9 years ago.

I am updating my website and used this article How can I display social icons on my website with HTML and CSS? to add some social media icons to my website.

Now I am wondering, how can I achieve a hover effect, i.e. change opacity). I know this should be only a few lines of code but I have no idea how to achieve that (CSS beginner)

Answer 1

Like this (CSS) if you want to target the specific element with class .email:

.icons .email:hover {
    // Your code here
    opacity: .5;
}

If you want a more generic solution, give all elements the samen class (.icon in this example) and do:

.icons:hover {
    // Your code here
    opacity: .5;
}

You might want to read about CSS cascading and inheritence.

Answer 2

You can do this simply by following code:

.className:hover (or) #id:hover{
opacity:0.5;
}

Answer 3

div:hover{ do: something }

Find out more about css selectors here

Answer 4

You don't need opacity for this, you can just aswell use the display attribute. This will work for all labels with an image with the class icon inside.

I added the blue background as a stand in for an image.

Demo

Html:

<label class="labelWithIcon"><img class="icon" />test</label>

CSS:

.labelWithIcon .icon{
    display:none;
    width:10px;
    height:10px;
    background-color:blue;
}

.labelWithIcon:hover .icon{
    display:inline;
}

.labelWithIcon{
    padding-left:10px;
}

.labelWithIcon:hover{
     padding-left:0px;   
}

EDIT: Made the selector more specific than "label"

Answer 5

You can use the :hover pseudo-class:

.social:hover{opacity: .7;}