How to Change the Color of an Image on Hover

How to change the color of an image on hover

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;
}

Change color of transparent image on hover using CSS

You could do that using javascript or if you just want use css follow the steps as follow:

Add the new coloured image for the hover state:

<a href="index.html">
   <img src="images/ReLiveLogoWHITE TRANSPARENT.png" class="logo">
   <img src="images/redImage.png" class="logo-hover">
</a>

Apply those styles to the CSS:

A .logo {
   height: 30vh;
   margin: 1em;
   display: block;
}

A:hover .logo {
   display: none;
}

A .logo-hover {
   display:none;
}

A:hover .logo-hover {
   display:block;
}

Change image background color on hover

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:

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;    

  position: relative;

  z-index: -1;

}

li:hover .image{    

    background: rgba(0, 255, 255, 0.5);

}

.image a{

    height: 180px;       

    display: block;

}

.text {

  font-size: 30px;

  color: #fff;

  position: absolute;

  z-index: -1;

  top: 0;

  padding-left: 10px;

}

<!DOCTYPE html>

<html>

    <head>

        <title>TODO supply a title</title>

        <meta charset="UTF-8">

    </head>

    <body>

        <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>

    </body>

</html>

Change text color on image hover

try adding ~

 img.button:hover ~ p.text {

  color: rgb(88, 202, 230);

}

p {

  font-weight: 300;

  transition: color 1s ease;

}

   <img class='button' src='http://s8.postimg.org/s9vmeo1dx/user_avatar_circle.jpg'>

    <p class='text'>Profile</p>

How to change the color of the SVG when hovering over the image?

Just add the :hover pseudoclass onto the image instead of the svg. Also, you should use 'fill' instead of background-color for svgs to properly fill in only the path :)

If you want the middle triangle to be white permanently (like in the link's video), you'll need to add another path to the svg and fill that with white.

EDIT: added the center play button path (just copied the SVG from the referenced page + its viewbox) and changed opacity when hovered.

#youtube-remote,
#youtube-remote .youtube-remote-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

#youtube-remote svg {
    position: absolute;
    opacity: 0.8;
}

#youtube-remote:hover svg {
    opacity: 1;
}

#youtube-remote:hover .play-outer {
    fill: red;
}

   

 <div id="youtube-remote">
  <a href="https://www.youtube.com" target="_blank">
    <div class="youtube-remote-container">
      <img src="https://img.youtube.com/vi/ZLga1SIE1HA/maxresdefault.jpg" width="1280" height="720" alt="Sample Image" loading="lazy">
      <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 68 48">
        <path class="play-outer" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"/>
        <path d="M 45,24 27,14 27,34" fill="white"/>
      </svg>
    </div>
  </a>
</div>

How to Change the Color of an Image on Hover