Hover for images

Question

Any body knows a solution to hover an image in HTML or css? I have a social network icons and I want to use this in my web site, so I need to change the icon color when the mouse moves on it please help me if you have an idea thanks a lot

<!DOCTYPE html>
<html>
<head>
<style>
.socialNetIcons {
background: url(newiconset4.png);
height: 30.5px;
width: 30.5px;
float: left;
margin-right: 2px;
cursor: pointer;
}
a.hover{
color: red
}
#facebook {background-position: 0px 0px;}
#linkedin {background-position: 0px -30.5px;}
#aparat {background-position: 0px -61px;}
#instagram {background-position: -30.5px 0px;}
#youtube {background-position: -30.5px -30.5px;}
#yahoo {background-position: -30.5px -61px;}
#twitter {background-position: 61px 0px;}
#telegram {background-position: 61px -30.5px;}
#rss {background-position: 61px -61px;}
#google {background-position: -91.5px 0px;}
#skype {background-position: -91.5px -30.5px;}
#behance {background-position: -91.5px -61px;}
</style>
</head>
<body>
<div class="socialNet">
<a href="http://facebook.com" target="_blank">
<div class="socialNetIcons" id="facebook"></div></a>
<a href="http://instagram.com" target="_blank">
<div class="socialNetIcons" id="instagram"></div></a>
<a href="http://linkedin.com" target="_blank">
<div class="socialNetIcons" id="linkedin"></div></a>
<a href="http://youtube.com" target="_blank">
<div class="socialNetIcons" id="youtube"></div></a>
<div class="socialNetIcons" id="telegram"></div></a>
<a href="http://skype.com" target="_blank">
<div class="socialNetIcons" id="skype"></div></a>
<a href="http://aparat.com" target="_blank">
<div class="socialNetIcons" id="aparat"></div></a>
<a href="http:/mail.yahoo.com" target="_blank">
<div class="socialNetIcons" id="yahoo"></div></a>
<a href="http://rss.com" target="_blank">
<div class="socialNetIcons" id="rss"></div></a>
<a href="http://behance.net" target="_blank">
<div class="socialNetIcons" id="behance"></div></a>
</div>
</body>
</html>

Can you please show us your code and what you have tried so far? — Brett East, May 06 '17 at 10:19
Possible duplicate of [Changing image on hover with CSS/HTML](http://stackoverflow.com/questions/18813299/changing-image-on-hover-with-css-html) — Alex Cio, May 07 '17 at 10:05

score 1 · Answer 1 · answered May 06 '17 at 10:26

you can use font awesome to create social media icons without images Add this stylesheet in your head section

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

.fa {
  padding: 20px;
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  margin: 5px 2px;
}



.fa-facebook:hover {
  background: #3B5998;
  color: white;
}
.fa-facebook {
  background: red;
  color: white;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
}
.fa-twitter:hover {
  background: green;
  color: white;
}

.fa-google {
  background: #dd4b39;
  color: white;
}
.fa-google:hover {
  background: yellow;
  color: white;
}

.fa-linkedin {
  background: #007bb5;
  color: white;
}
.fa-linkedin:hover {
  background: red;
  color: white;
}

.fa-youtube {
  background: #bb0000;
  color: white;
}

.fa-instagram {
  background: #125688;
  color: white;
}

.fa-pinterest {
  background: #cb2027;
  color: white;
}

.fa-snapchat-ghost {
  background: #fffc00;
  color: white;
  text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

.fa-skype {
  background: #00aff0;
  color: white;
}

.fa-android {
  background: #a4c639;
  color: white;
}

.fa-dribbble {
  background: #ea4c89;
  color: white;
}

.fa-vimeo {
  background: #45bbff;
  color: white;
}

.fa-tumblr {
  background: #2c4762;
  color: white;
}

.fa-vine {
  background: #00b489;
  color: white;
}

.fa-foursquare {
  background: #45bbff;
  color: white;
}

.fa-stumbleupon {
  background: #eb4924;
  color: white;
}

.fa-flickr {
  background: #f40083;
  color: white;
}

.fa-yahoo {
  background: #430297;
  color: white;
}

.fa-soundcloud {
  background: #ff5500;
  color: white;
}

.fa-reddit {
  background: #ff5700;
  color: white;
}

.fa-rss {
  background: #ff6600;
  color: white;
}

    <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>
<body>
    <a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-google"></a>
<a href="#" class="fa fa-linkedin"></a>

</body>

thank you, but my icons designed according to my website. and my designs don't exist in awesome fonts. — shp, May 07 '17 at 06:51

score 0 · Answer 2 · 2017-05-06T10:40:07.143

0

You can use css and javascript together:

div{
  font-family: Arial;
  font-size: 32px;
  text-align: center;
  vertical-align: middle;
  width: 1.2em;
  background-color: blue;
  border-radius: 7px;
  color: white;
  font-weight: bold;
}

<div onmouseover="this.style.backgroundColor = 'navy'" onmouseout="this.style.backgroundColor = 'blue'">f</div>

edited May 06 '17 at 10:40

answered May 06 '17 at 10:31

dale landry · Answer 3 · 2017-05-06T11:25:31.080

Add hover Psuedo class for your img tag in your css... Simply call on an opacity filter and set an alpha to your liking...

Read up on -> Hover class

Read up on -> Opacity CSS Mozilla Development

img:hover {
   opacity: 0.5;
   filter: alpha(opacity=50); /* For IE8 and earlier */
}

Or better yet, define a class in your CSS directory for the hover event and then add the class to your tag.

CSS

img {
   margin:0px 10px;
}
.smIcons:hover {
   opacity: 0.5;
   filter: alpha(opacity=50); /* For IE8 and earlier */
}

HTML

<img class="smIcons" src="https://image.flaticon.com/icons/svg/174/174848.svg" width="50" height="50">

Working fiddle

Updated fiddle with class

There are also filter functions that can be added to images.

.filter-me {
  filter: <filter-function> [<filter-function>]* | none
}

CSS filter tricks

score 0 · Answer 4 · 2017-05-07T10:28:56.930

You do hover hover action on stylesheet, html or via javascript codes. For now I use via CSS codes. And I recommend to use Font Awesome, Linear Icons, Simple Lince Icons, Materialize Icons, SVG Images, etc... for more beautiful icons for your work.

The CSS or via stylesheet hover code are the following below:

.icon{
   font-size:30px;
}
.icon-social-instagram:hover{
   color: teal;
   cursor:pointer;
}
.icon-social-google:hover{
   color: teal;
   cursor:pointer;
}
.icon-social-dribbble:hover{
   color: teal;
   cursor:pointer;
}
.icon-social-steam:hover{
   color: teal;
   cursor:pointer;
}

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.min.css">

<span class="icon icon-social-instagram"></span>
<span class="icon icon-social-google"></span>
<span class="icon icon-social-dribbble"></span>
<span class="icon icon-social-steam"></span>

Hover for images

4 Answers4