css - HTML img tag with hover issue -
am having hard time trying figure why cannot images here change color on hover. images svg files , should adopt color. code:
html:
<div class="tooltile col-md-3"> <a href="#/cards"> <img src="ppt/assets/toolicons/requestnewcard.svg" > <p>manage debit card</p> </a> </div> <div class="tooltile col-md-3"> <a href="#/recurclaim"> <img src="ppt/assets/toolicons/recurring.svg" > <p>recurring claims</p> </a> </div>
and associated css:
.tooltile { height: 200px; float: left; } .tooltile img { color: #ab2328; height: 100px; width: 93px; margin-left: auto; margin-right: auto; display: block; } .tooltile img:hover { color: yellow; }
color related text elements, want border.
.tooltile img:hover { border: yellow 1px solid; }
here jsfiddle of it: https://jsfiddle.net/td70mqq5/
if thats not looking for, research on: svg {fill: currentcolor;}
(https://css-tricks.com/cascading-svg-fill-color/)
Comments
Post a Comment