9 Replies - 541 Views - Last Post: 12 January 2018 - 05:14 AM

#1 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Hovering over icon to show different color icon

Posted 13 November 2017 - 07:58 PM

This question is pretty basic, but I want to be sure there isn't an alternative method than what I currently do. Let's say I have a Facebook icon. As of now, when a user hovers over that image, I display another image that is a different color. Is this normal to do?

I just want to be sure there isn't any other method that allows me to reduce images on a page.

Thanks
Is This A Good Question/Topic? 0
  • +

Replies To: Hovering over icon to show different color icon

#2 modi123_1   User is online

  • Suitor #2
  • member icon



Reputation: 14176
  • View blog
  • Posts: 56,798
  • Joined: 12-June 08

Re: Hovering over icon to show different color icon

Posted 13 November 2017 - 08:52 PM

Why swap an image? Why not color an outline or something in CSS and keep the same image?
Was This Post Helpful? 0
  • +
  • -

#3 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Re: Hovering over icon to show different color icon

Posted 13 November 2017 - 09:14 PM

I initially thought that was the only way. I wasn't sure if a filter could be applied or something else using CSS to avoid the additional image. Here is a fiddle that I have been playing with below:

https://jsfiddle.net/n1vn8bho/
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Hovering over icon to show different color icon

Posted 14 November 2017 - 12:36 AM

There are CSS filters that could be considered. Check browser support at caniuse.com.

Another option is to consider a sprite, using image editing software to save adjacent images as a single image file, using CSS to bring one or other into view. This is more relevant with slightly larger images or a sprite map with several images stitched together. (I made up the term 'sprite map'.)

Facebook icons are available via a font (or svg). A site like icomoon can, as I recall, create a font with just the characters needed.



I'm not an expert in these matters, but these are the options of which I am aware.
Was This Post Helpful? 0
  • +
  • -

#5 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Re: Hovering over icon to show different color icon

Posted 25 November 2017 - 12:58 PM

Someone recommended using an SVG image and then changing the filter color. Does this sound feasible? I tried it, but without good results.

https://jsfiddle.net/n1vn8bho/7/
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Hovering over icon to show different color icon

Posted 25 November 2017 - 04:18 PM

I know little about svg's and I don't know how much control you would have over an external svg image. I would have thought, though, that you would obtain the svg code for an icon - particularly for just one or two, rather than using an external resource or font collection.

I grabbed some svg code. It took a little investigation to work: I had to add an id to a path (or shape) within the svg.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Some Face</title>
<style type="text/css">
svg #f1 {
    fill: #3A589B;
}
svg:hover #f1 {
    fill: #ff0000;
}
</style>
</head>
<body>
<svg height="67px" id="Layer_1" style="enable-background:new 0 0 67 67;" version="1.1" viewBox="0 0 67 67" width="67px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path id="f1" d="M29.765,50.32h6.744V33.998h4.499l0.596-5.624h-5.095  l0.007-2.816c0-1.466,0.14-2.253,2.244-2.253h2.812V17.68h-4.5c-5.405,0-7.307,2.729-7.307,7.317v3.377h-3.369v5.625h3.369V50.32z   M34,64C17.432,64,4,50.568,4,34C4,17.431,17.432,4,34,4s30,13.431,30,30C64,50.568,50.568,64,34,64z" style="fill-rule:evenodd;clip-rule:evenodd;"/></svg>
</body>
</html>

(I also had to remove the inline style-rule for fill that was originally present.)
Was This Post Helpful? 0
  • +
  • -

#7 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Hovering over icon to show different color icon

Posted 25 November 2017 - 04:39 PM

I subsequently found this similar codepen.
Was This Post Helpful? 0
  • +
  • -

#8 pfar54   User is offline

  • D.I.C Regular

Reputation: 0
  • View blog
  • Posts: 473
  • Joined: 30-April 15

Re: Hovering over icon to show different color icon

Posted 27 November 2017 - 09:28 PM

Thanks!

So, is there no way to do it by using background images? I honestly have no idea how you are even setting the image in your svg tag.
Was This Post Helpful? 0
  • +
  • -

#9 andrewsw   User is online

  • Bouncy!
  • member icon

Reputation: 6563
  • View blog
  • Posts: 26,619
  • Joined: 12-December 12

Re: Hovering over icon to show different color icon

Posted 28 November 2017 - 01:01 AM

I didn't set the image I found it. I guess that the path is outlining the logo and guess again that evenodd is alternating the colour (inside and out).

If you are determined to use a background image then I think it requires some effort because the background has a limited set of properties (image, size, color, etc.) to work with.

There is some interesting information here:

Coloring SVGs in CSS Background Images

An alternative, that I mentioned earlier, is a two-image sprite, and use hover to re-position the background so that the alternative image is shown.
Was This Post Helpful? 0
  • +
  • -

#10 nensi.panjwani   User is offline

  • New D.I.C Head

Reputation: 2
  • View blog
  • Posts: 8
  • Joined: 10-January 18

Re: Hovering over icon to show different color icon

Posted 12 January 2018 - 05:14 AM

Hi,

You can refer from click on this

Thanks.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1