CSS how to change a SVG on hover over link

user_6561309 0
Viewed 785

I have the following:

As you can see, there is some css that needs to change the image when a user hovers over it.

.dashboard-card-content:hover .right-arrow a {
  background-color: #29b1e9;
}

.dashboard-card-content:hover .right-arrow a svg path {
  stroke: #fff;
}
<div class="white-container dashboard-card-content">
  <div class="gLoader-img">
    <img src="assets/images/comp-switch-logo2.png" alt="">
  </div>
  <div class="gloaderSvg-wrapper"></div>
  <div class="dashboard-card-header-content">
    <h5>Policy Maintainance</h5>
  </div>
  <div class="dashboard-card-footer-content">
    <div class="right-arrow">
      <a href="#">
        <img src="assets/images/right-icon.svg" class="svg" alt="">
      </a>
    </div>
  </div>
</div>

The normal state is as desired.

enter image description here

The on hover state is not as desired. It is making the buttons background light blue as desired, but it does not make the arrow white.

enter image description here

This is the desired look on hover.

enter image description here

Question

How do I change the above htlm/scss to allow the image to turn white when a user hovers over it?

css html
3 Answers

i think there is no way to do that with color and you can use ways like this below

.icon {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: cover;
}
.icon-arrow {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-arrow-black.svg);
}
.icon-arrow:hover,
.icon-arrow:focus {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}
<div>
  
  <span class="icon icon-arrow"></span>
 
</div>

user_149835110

You should try playing with the fill css attribute. This will work on your arrows as I think they are shapes. This is the SVG counterpart to background-color. You might need to use classes or identifiers in the SVG to target only the arrows...

If that does not work, better show us the SVG so we can help a bit more.

user_16201940

Use object tag instead of img tag. This is one of example.

.svg {
  display: inline-block;
  width: 70px;
  height: 70px;
  background-size: cover;
}
.svg:hover {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
<object type="image/svg+xml" data="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/icon-bike-black.svg" class="svg">
    Bike
  </object>

user_155795730
Related