Как изменить цвет изображения при наведении css

HTML ManHTML Man

9254 gold badges17 silver badges39 bronze badges

Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the background-color of the .fb-icon to blue on hover. So you’re CSS would be:

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#0000ff;
}

Additionally, if you don’t want to use PNG’s you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup your CSS as:

fb-icon{
    background:url('path/to/image/image.png') no-repeat 0 0;
}

fb-icon:hover{
    background:url('path/to/image/image.png') no-repeat 0 -100px;
}

answered Jan 28, 2012 at 17:41

It’s a bit late but I came across this post.

It’s not perfect but here’s what I do.

HTML Code

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div>

CSS Code

.showcase-menu {
  margin-left:20px;
    margin-right:20px;
    padding: 0px 20px 0px 20px;
    background-color: #C37500;
    behavior: url(/css/border-radius.htc);
  border-radius: 20px;
    }

.showcase-menu-social img:hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important; /* For IE8 and earlier */
  box-shadow: 0 0 0px #000000 !important;
}

Now my border radius of 20px matches up exactly with the image border radius. As you can see the .showcase-menu has the same background as the .showcase-menu-social. What this does is to allow the ‘opacity’ to take effect and no ‘square’ background or border shows, thus the image slightly reduces it’s saturation on hover.

It’s a nice effect and does give the viewer the feedback that the image is in focus. I’m fairly sure on a darker background, it would have even a better effect.

The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.

Enjoy!

answered Jul 18, 2013 at 7:00

WillsterWillster

2,5061 gold badge32 silver badges32 bronze badges

brytebeebrytebee

411 silver badge7 bronze badges

If I understand correctly then it would be easier if you gave your image a transparent background and set the background container’s background-color property without having to use filters and so on.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Shows you how to use filters in IE. Maybe if you leverage something from that. Not very cross-browser compatible though. Another option might be to have two images and use them as background-images (rather than img tags), swap one out after another using the :hover pseudo selector.

answered Jan 28, 2012 at 17:13

Ok, try this:

Get the image with the transparent circle — http://i39.tinypic.com/15s97vd.png
Put that image in a html element and change that element’s background color via css. This way you get the logo with the circle in the color defined in the stylesheet.

The html

<div class="badassColorChangingLogo">
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine
</div>

The css

div.badassColorChangingLogo{
    background-color:white;
}
div.badassColorChangingLogo:hover{
    background-color:blue;
}

Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.

answered Jan 28, 2012 at 18:07

Oliver NiOliver Ni

2,5677 gold badges30 silver badges43 bronze badges

HTML ManHTML Man

9254 gold badges17 silver badges39 bronze badges

Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the background-color of the .fb-icon to blue on hover. So you’re CSS would be:

fb-icon{
    background:none;
}

fb-icon:hover{
    background:#0000ff;
}

Additionally, if you don’t want to use PNG’s you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup your CSS as:

fb-icon{
    background:url('path/to/image/image.png') no-repeat 0 0;
}

fb-icon:hover{
    background:url('path/to/image/image.png') no-repeat 0 -100px;
}

answered Jan 28, 2012 at 17:41

It’s a bit late but I came across this post.

It’s not perfect but here’s what I do.

HTML Code

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div>

CSS Code

.showcase-menu {
  margin-left:20px;
    margin-right:20px;
    padding: 0px 20px 0px 20px;
    background-color: #C37500;
    behavior: url(/css/border-radius.htc);
  border-radius: 20px;
    }

.showcase-menu-social img:hover {
  background-color: #C37500;
  opacity:0.7 !important;
  filter:alpha(opacity=70) !important; /* For IE8 and earlier */
  box-shadow: 0 0 0px #000000 !important;
}

Now my border radius of 20px matches up exactly with the image border radius. As you can see the .showcase-menu has the same background as the .showcase-menu-social. What this does is to allow the ‘opacity’ to take effect and no ‘square’ background or border shows, thus the image slightly reduces it’s saturation on hover.

It’s a nice effect and does give the viewer the feedback that the image is in focus. I’m fairly sure on a darker background, it would have even a better effect.

The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.

Enjoy!

answered Jul 18, 2013 at 7:00

WillsterWillster

2,5061 gold badge32 silver badges32 bronze badges

brytebeebrytebee

411 silver badge7 bronze badges

If I understand correctly then it would be easier if you gave your image a transparent background and set the background container’s background-color property without having to use filters and so on.

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

Shows you how to use filters in IE. Maybe if you leverage something from that. Not very cross-browser compatible though. Another option might be to have two images and use them as background-images (rather than img tags), swap one out after another using the :hover pseudo selector.

answered Jan 28, 2012 at 17:13

Ok, try this:

Get the image with the transparent circle — http://i39.tinypic.com/15s97vd.png
Put that image in a html element and change that element’s background color via css. This way you get the logo with the circle in the color defined in the stylesheet.

The html

<div class="badassColorChangingLogo">
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine
</div>

The css

div.badassColorChangingLogo{
    background-color:white;
}
div.badassColorChangingLogo:hover{
    background-color:blue;
}

Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.

answered Jan 28, 2012 at 18:07

Oliver NiOliver Ni

2,5677 gold badges30 silver badges43 bronze badges

ul {
  list-style: none;
}

li {
  display: inline-block;
}

img {
  filter: brightness(50%);
  -webkit-filter: brightness(50%);
  -moz-filter: brightness(50%);
  -o-filter: brightness(50%);
  -ms-filter: brightness(50%);
  width: 246px;
  height: 180px;    
}

a:hover img {    
  background: blue;
}

.text {
  font-size: 30px;
  color: #fff;
  position: absolute;
  z-index: 1;
  top: 0;
  padding-left: 10px;
}

<div class="row">
  <div class="col-lg-12">
    <ul>
      <li>
        <div class="image">
          <a href="#" title="Blog 7"><img src="http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png"></a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
        </div>
      </li>
      <li>
        <div class="image">
          <a href="#" title="Blog 8"><img src="http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png"></a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
        </div>
      </li>
      <li>
        <div class="image">
          <a href="#" title="Blog 9"><img src="http://mile.x3.rs/mile/hostel2hostel/img/typing.png"></a>
        </div>
        <div class="text">
          <p>Lorem Ipsum</p>
        </div>
      </li>
    </ul>
  </div>
</div>

asked Nov 29, 2015 at 18:00

Use the alpha channel and a negative z-index

• First, you need to select the right element: li:hover .image.

• Secondly, you need to use rgba colors to achieve transparency.

  li:hover .image{    
      background: rgba(0, 255, 255, 0.5);
  }
  

• Thirdly, push the actual images to the back:

  img {
      position: relative;
      z-index: -1;
  }
  

Working example:

answered Nov 29, 2015 at 22:55

Change background on a tag instead of img. Adjust color & opacity accordingly

a:hover {
     display:inline-block;    
     background: #4AFFFF;      
}
img:hover{
     opacity:0.5;
}

Instead of

a:hover img {    
  background: blue;
}

To make it work on hovering over text use this code [li is parent of text and image both so it should work fine]

li:hover {    
    background: #4AFFFF;      
}
img:hover{
    opacity:0.5;
}

If you try this now you will see gap below images. Its only viewable on stackoverflow. When you will directly run this in browser you wont see any it.

I have checked with Chrome, Firefox and Opear there is not gap below images

If for some reason you do see it. you can easily adjust it with margin/padding

answered Nov 29, 2015 at 22:34

    ul {
      list-style: none;
    }
    
    li {
      display: inline-block;
    }
    
    .anchorImage {
      filter: brightness(50%);
      -webkit-filter: brightness(50%);
      -moz-filter: brightness(50%);
      -o-filter: brightness(50%);
      -ms-filter: brightness(50%);
      width: 246px;
      height: 180px;       
      display:block;
    }
    
    .image1 {
      background:url('http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png');

    } 
    .image2 {
     background:url('http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png');

    }
    .image3 {
         background:url('http://mile.x3.rs/mile/hostel2hostel/img/typing.png');
    }
    
    .image1:hover {   
      background: 
        /* top, transparent red, faked with gradient */ 
         linear-gradient(
          rgba(0, 0, 200, 0.45), 
          rgba(0, 0, 200, 0.45)
        ),
        /* bottom, image */
        url('http://mile.x3.rs/mile/hostel2hostel/img/bianca_capstick.png');
    }
     .image2:hover {   
      background: 
        /* top, transparent red, faked with gradient */ 
         linear-gradient(
          rgba(0, 0, 200, 0.45), 
          rgba(0, 0, 200, 0.45)
        ),
        /* bottom, image */
        url('http://mile.x3.rs/mile/hostel2hostel/img/coffe_keyboard.png');
    }
    .image3:hover {   
      background: 
        /* top, transparent red, faked with gradient */ 
         linear-gradient(
          rgba(0, 0, 200, 0.45), 
          rgba(0, 0, 200, 0.45)
        ),
        /* bottom, image */
        url('http://mile.x3.rs/mile/hostel2hostel/img/typing.png');
    }   
    .text {
      font-size: 30px;
      color: #fff;
      position: absolute;
      z-index: 1;
      top: 0;
      padding-left: 10px;
    }

 <div class="row">
      <div class="col-lg-12">
        <ul>
          <li>
            <div class="image">
              <a class='anchorImage image1' href="#" title="Blog 7"></a>
            </div>
            <div class="text">
              <p>Lorem Ipsum one</p>
            </div>
          </li>
          <li>
            <div class="image">
              <a href="#" title="Blog 8" class="anchorImage image2"></a>
            </div>
            <div class="text">
              <p>Lorem Ipsum two</p>
            </div>
          </li>
          <li>
            <div class="image">
              <a href="#" title="Blog 9" class="anchorImage image3"></a>
            </div>
            <div class="text">
              <p>Lorem Ipsum three</p>
            </div>
          </li>
        </ul>
      </div>
    </div>

MartinMartin

21.7k10 gold badges65 silver badges127 bronze badges

ProdigyProdigy

3803 silver badges9 bronze badges

Did you try

a:hover img {  
    background: blue;
    background: transparent;
}