CODEWITHSUNDEEP
htmlcss
Richard
Richard

Reputation: 8935

CSS how to change a SVG on hover over link

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?

Upvotes: 4

Views: 2589

Answers (3)

Omid Mohsenzadeh
Omid Mohsenzadeh

Reputation: 96

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>

Upvotes: 3

BTSM
BTSM

Reputation: 1663

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>

Upvotes: 1

Salketer
Salketer

Reputation: 15711

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.

Upvotes: 1

Related Questions