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.
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.
This is the desired look on hover.
Question
How do I change the above htlm/scss to allow the image to turn white when a user hovers over it?
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>
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>
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.
Related
so i'm very new to web development and can't find anything online about the issue i'm having. I'm basically just trying to change a hover function on 4 logo's i've inserted into the web page i'm working with. All image are PNG's with a plain white colour and a transparent background (I converted it myself in Photoshop). However, i'm trying to use the hover function on each image so it turns to a grey(ish) shade but for some reason the white colour doesn't change but the background colour does, when I only want the white part of the image to change to the slightly darker shade. Any help would be much appreciated.
Here is the HTML (just in case it's needed)
<!-- social media bar -->
<div class="socials">
<!-- instagram link -->
<div class="instaBox" id="socialBox">
<a href="#">
<img src="/assets/instaLogo.png" alt="Instagram Logo" class="instaLogo" id="socialsLogo">
</a>
</div>
<!-- tiktok link -->
<div class="tiktokBox" id="socialBox">
<a href="#">
<img src="/assets/tiktokLogo.png" alt="tiktok logo" class="tiktokLogo" id="socialsLogo">
</a>
</div>
<!-- youtube link -->
<div class="youtubeBox" id="socialBox">
<a href="#">
<img src="/assets/youtubeLogo.png" alt="YouTube Logo" class="youtubeLogo" id="socialsLogo">
</a>
</div>
<!-- vimeo link -->
<div class="vimeoBox" id="socialBox">
<a href="#">
<img src="/assets/vimeoLogo.png" alt="Video Logo" class="vimeoLogo" id="socialsLogo">
</a>
</div>
</div>
And here is the CSS
/* social media bar */
.socials{
float: left;
width: 20%;
height: 100%;
}
#socialBox{
float: left;
width: 10%;
overflow: hidden;
margin-left: 5%;
margin-right: 5%;
}
#socialsLogo{
border: none;
width: 100%;
}
#socialsLogo:hover{
background: #b0b0b0;
}
I'll add an image of the logo's on the web page as well so you can see the issue i'm getting.
Logo's normally
Logo's with the hover effect
You can use filter
If your goal is to change the icons lines colors, then use svg images and change their color
img { transition: filter .25s ease-out }
img:hover { filter: grayscale(.5) }
<img src="https://placekitten.com/200/300" />
According to your screenshot, your icons apparently have transparency.
I also assume your html body or parent element has a black background color.
You could actually just change the opacity to emulate a gray icon color.
As an alternative you could also change contrast.
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
body {
background-color: #000;
}
.socialBox {
text-align: center
}
.socialLink {
background-color: #000;
color: #fff;
display: inline-block;
text-align: center;
width: 1em;
height: 1em;
font-size: 5em;
}
.socialLink img {
width: 100%;
}
.socialLinkFontAwesome {
color: #fff;
}
.socialLink:hover .icon-img {
filter: contrast(0.5);
}
.socialLink:hover .icon-img2 {
opacity: 0.5;
}
.socialLinkFontAwesome:hover {
color: #999;
}
/* just for adjusting example icon sizes */
.svg-inline--fa {
height: 1em;
font-size: 0.75em;
vertical-align: 0.125em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/js/all.min.js"></script>
<!-- tiktok link -->
<p class="socialBox">
<a class="socialLink tiktokLink" href="#">
<img class="icon-img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink tiktokLink2" href="#">
<img class="icon-img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAO1JREFUeNpiYBgFBAAjOZr+//+/H4nbyMjIeICqrvqPCvqp7m00C94DsQAtLQCB80CsQEsLYGA9ECfQ0oL/aAmAgYlIAw2A2AFHWD/Ap5eFgMENQCoeiGHh6wjE6EkyEUrD1H0gxsUC0IhDBw5YgsgBn1m4gqgeiA1okrVByQ1LOk9AjgNSfIAtDgLQ+IGUFAXYggg5pXygtJwhlEwF0JMmKMlSasEFNH4/cuoCUvNJyQe4Ivo+WkSC+PuhEY4z15JigcN/wuA9RQUcUHMAFhcjl55ExQUjoRwNTbb20GIAFD8HgSlrw8ip9AECDACz4XB+nB9zxwAAAABJRU5ErkJggg=="
/></a>
<a class="socialLink socialLinkFontAwesome"><i class="fab fa-tiktok"></i></a>
</p>
Recommendations
Avoid duplicate element IDs. Better add your ids to class attribute like this:
<div class="socialBox tiktokBox">
You might also consider to use a svg/vector based icon library like fontAwesome, feather-icons etc. (see third icon example )
These libraries can simplify your development tasks and offer a superior rendering quality, since they are scalable.
Really confused by this one. I have a grid of items with a link to wrap the image, an image overlay div, and a title. When the link is visited, the nested image overlay should change its background color opacity. But it's not being applied. I can verify that the :visited pseudoclass is taking effect, because it will apply color change to the nested title. But the opacity won't change. I've tried numerous methods of applying it. Here's a pen:
https://codepen.io/heaversm/pen/gOYNJQv
HTML
<div class="gallery__container">
<div class="gallery__item">
<a class="gallery__link" href="http://codepen.io">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
<div class="gallery__item">
<a class="gallery__link" href="http://nonsensesite.com">
<div class="gallery__image_container">
<img src="https://i.imgur.com/MQcuk3n.jpg">
<div class="gallery__overlay"></div>
</div>
<p class="gallery__title">Title</p>
</a>
</div>
</div>
CSS
.gallery__container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-gap: 1.375vw;
margin: 0 auto;
padding: 40px 50px;
}
.gallery__image_container {
position: relative;
}
.gallery__item {
width: 100%;
height: auto;
}
.gallery__link {
display: block;
width: 100%;
height: 100%;
&:visited {
color: red; //just to verify visited pseudoclass is applied
.gallery__overlay {
background-color: rgba(0,0,0,.1) !important; //NOT WORKING
}
}
}
.gallery__image {
//width: 100%;
//height: auto;
}
.gallery__overlay {
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: rgba(black, 0.9);
z-index: 1;
}
From https://developer.mozilla.org/en-US/docs/Web/CSS/:visited
For privacy reasons, browsers strictly limit which styles you can apply using this pseudo-class, and how they can be used:
Allowable CSS properties are
color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, column-rule-color, and outline-color.
Allowable SVG attributes are fill and stroke.
The alpha component of the allowed styles will be ignored. The alpha component of the element's non-:visited state will be used instead, except when that component is 0, in which case the style set in :visited will be ignored entirely.
Although these styles can be change the appearance of colors to the end user, the window.getComputedStyle method will lie and always return the value of the non-:visited color.
And from my own observation, child elements of a link are also subject to the same styling restrictions.
Seen this question asked quite a few times, but seems like solutions work for some but not others:
Code is as follows:
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>
Tried the suggested solution of inline-block and block to display but neither worked, clickable area still much larger than image itself.
Just change your css to the following, which includes width and height:
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
width: 125px;
height: 62.5px;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png" width="125" height="62.5"> </a>
I think you can set with width and height, something look like:
<a width="125" height="62.5">
The solution provided by Luka Kerr surely works for this particular use case. However, as a general solution, you can just add the css property display: block; to your <img> tag and the <a> around it will automatically scale to the size of your img (even when its size changes).
.headbuttons {
opacity: .7;
background-color: grey;
background-blend-mode: overlay;
display: block;
}
.headbuttons img {
display: block;
}
<a class="headbuttons" id="homebutton" href="C:\Users\Dom Nguyen\Documents\website.html">
<img src="C:\Users\Dom Nguyen\Documents\home_button.png">
</a>
Am having a hard time trying to figure why I cannot get the images here to change color on hover. The images themselves are svg files and should just adopt the color. The code:
HTML:
<div class="toolTile col-md-3">
<a href="#/cards">
<img src="ppt/assets/toolIcons/requestnewcard.svg" >
<p>Manage my 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 is related to text elements, you want border.
.toolTile img:hover {
border: Yellow 1px solid;
}
Here is a JSfiddle of it: https://jsfiddle.net/td70mqq5/
If thats not what your looking for, do some research on: svg {fill: currentColor;} (https://css-tricks.com/cascading-svg-fill-color/)
CSS does not apply across document boundaries. The CSS in your HTML will not be applied to the contents of your external SVG files.
You have to either inline the SVG in your HTML file, or you can move the styles to the SVG file(s) and change the <img> elements to <object> elements.
I've got to design a menu bar which has two actions for it's links
1) Before action where the icon is green
2) On hover the icon should change to it's active version
On changing to active version, I need the text to display too. Like this:
My current HTML for this is:
<div class="span1 but">
<a href="#">
<div class="image-holder" id="about">
</div>
<div class="text-menu" id="about-text">
About
</div>
</a>
</div>
Where span1 is from Bootstrap while but is the css class as follows:
.but{
height:70px;
}
the ID #about is defined as:
#about{
background:url('../img/about-green.png') no-repeat;
background-size: 60px 60px;
}
#about:hover{
background:url('../img/about-active.png') no-repeat;
background-size: 60px 60px;
}
My current problem is such that on hover, I want the text to appear too. The text-box for this is defined as:
.text-menu{
text-align: center;
margin-top: -10px;
text-decoration: none;
color: rgba(255,255,255,0);
}
And the ID #about-text is:
#about-text:hover{
color: rgba(0,0,0,1);
}
What should I do to make the text appear along with the image on hover?
Try the following.
#about-text{
display: none;
}
#about:hover #about-text{
display: block;
}
This uses display:none; to hide the text but it shows the text if you hover on #about.
You can also try this.
.text-menu{
display: none;
}
.image-holder:hover .text-menu{
display: block;
You can use visibilityproperty
.text-menu{
visibility:hidden
}
.text-menu:hover{
visibility:visible
}
You have to change your HTML first in order to solve your problem.
<div class="image-holder" id="about">
<div class="text-menu" id="about-text">
About
</div>
</div>
Now add css as below instead of "#about-text:hover"
#about:hover #about-text{
color: rgba(0,0,0,1);
}
This will solve your problem.