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.
Related
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.
I wanted to make this linkable image to have a text in a pop up box (not the type of pop up that is on w3schools, I want a classic yellowish box) when I mouseover. I tried to do it like this
<div class="folder1">
<a href="yourlinkhere" target="_self" >
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
title="This is some text I want to display." </a>
</div>
Opening the page in the link works great but there is no pop up box when I hover on it. Any help?
Currently, you are setting the title attribute to get a tooltip type hint when the element is hovered over. If this is what you are looking to do but perhaps just style the textbox to be, say, yellow, I would suggest using the following:
a {
color: #900;
text-decoration: none;
}
a:hover {
color: red;
position: relative;
}
a[data]:hover:after {
content: attr(data);
padding: 4px 8px;
color: rgba(0,0,0,0.5);
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 2;
border-radius: 5px ;
background: rgba(0,0,0,0.5); /*Change this to yellow, or whatever background color you desire*/
}
<a data="This is the CSS tooltip showing up when you mouse over the link"href="#" class="tip">Link</a>
The above code was provided by Peeyush Kushwaha in this post. Simply change the anchor tag to your image tag, and apply styles as you see fit.
If by 'popup' you are looking for an alert to the user that requires interaction to close, you can use window.alert('text') in javascript in conjunction with the onmouseover event handler.
<img src="some_image.png" height="46px" width="57px" onmouseover="window.alert('Some Message')"/>
Otherwise, if you are looking for another element to be displayed upon mouseover of the image, you can use a bit of javascript to display a div or paragraph (really anything) upon mouseover of the img.
function showDiv() {
document.getElementById('popupBox').style.display = 'block';
}
#popupBox {
display: none;
}
<img src="some_image.png" width="41px" height="57px" onmouseover="showDiv()"/>
<div id="popupBox">Some Popup Text</div>
You can do this simply with CSS, or you can use one of many simple 'tooltip' JavaScript options. Bootstrap for example has this tooltip functionality built-in, ready to use. If you want something basic, here's a simple CSS-only approach that you can customise to your needs:
<!-- padding added here so you can see the pop-up above the folder, not necessary in-page -->
<div class="folder1" style="padding: 200px;">
<a href="yourlinkhere" target="_self" class="popper">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57" />
<span class="pop-up">This is some text I want to display.</span>
</a>
</div>
<style>
a.popper {
display: inline-block;
position: relative;
}
.pop-up {
display: none;
position: absolute;
left: 0;
bottom: 100%;
padding: 1rem 1.5rem;
background: yellow;
color: black;
}
a.popper:hover .pop-up,
a.popper:focus .pop-up {
display: block;
}
</style>
Basically, you position the a tag relatively so that it can have absolutely positioned children, then relying on a:hover you show / hide the child using the child element's display property.
You can equally try this using css pseudo-element
a{
position: relative;
}
a:hover:after{
display:block;
content: "This is some text I want to display";
width: 200px;
background: yellow;
position: absolute;
top:0;
padding: 20px;
}
<div class="folder1" style="margin: 70px">
<a href="yourlinkhere" target="_self" class="">
<img src="https://78.media.tumblr.com/c00202bad8ae39931e34a7efa861d18b/tumblr_p70bjja6xI1x5vw3ao1_500.png" height="46" width="57"
</a>
</div>
a {
text-decoration: none;
}
.social {
padding-left: 670px;
/*margin-left: 670px;*/
margin-top: -140px;
}
.blog_roll_links {
margin-left: 58px;
width: 210px;
height: 40px;
line-height: 40px;
}
.blog_roll_links:hover {
background-color: #C74451;
color: white !important;
text-shadow: 1px 1px 1px black;
}
.social_links {
padding-left: 8px;
margin-left: 40px;
width: 140px;
height: 30px;
line-height: 30px;
}
<div class="bolgnsocial">
<div class="blog">
<h3 class="featArt">blogroll</h3>
<div class="blog_roll_links">
HTML5 Doctor
</div>
<div class="blog_roll_links" style="margin-left:17em; margin-top: -40px;">
HTML5 Spec (working draft)
</div>
<div class="blog_roll_links">
Super Magazine
</div>
</div>
<div class="social">
<h3 class="featArt">social</h3>
<div class="social_links blog_roll_links">
facebook
</div>
<hr align="right" style="border-style: outset; border-color: white; margin-left: 45px; width: 140px;" />
<div class="social_links blog_roll_links">
twitter
</div>
</div>
</div>
I have this little snip of code and two questions:
The "facebook" and "twitter" have the same class of "blog_roll_links", however, the final result is different. It supposed to change the div color when hovered over the link, like the links in blog does. I just cannot figure it out why "blog" and "social" have the same class, but don't have the same effect.
I want to change the text color to white when hovered over, i have the code in my CSS, why it won't work?
Hi I highly recommend you to explore the browsers (chrome recommended) development tools.
if you inspect the elements you will see that in your current styling, that the anchor is nested inside your div AND that the anchor doesn't have the same width and height.
depending on which class you are adding :hover, css will react accordingly.
also the color of the font belongs to the anchor.
My suggestion is that you wrap the styling div inside the anchor, so that the whole div becomes a link ;)
Hope this helps you
I'm trying to apply a hover for a whole block (the same block must point to a link), but can't make this happen.
http://codepen.io/anon/pen/GogjQK
I've tried to wrap an <a> tag around the entire frame class and edit the hover states individually, but nothing happens.
This is how I'm trying to make it appear on hover, as well when the the link is clicked and active
Hope someone can help me out with this one. Thank you in advance.
You can use child selectors on your frame div to affect the children within.
For example, I added the following code to color the h3 tag when the main frame is hovers.
.frame:hover > div > h3 {
color: #00bb00;
}
If you modify your HTML slightly to be
<div class="frame">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png" class="thumbnail" />
<img src="http://placehold.it/60x60" class="thumbnail" id="hidden" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</div>
You can use the following CSS to change the image as well:
.frame:hover > .thumbnail {
display:none;
}
.frame:hover > #hidden {
display:inline;
}
#hidden {
display:none;
}
Here's an example codepen.
Try adding a hyper reference after the creation of the div that contains your block, like this:
<div class="frame"> <a href="http://stackoverflow.com">
<img src="http://imagizer.imageshack.us/v2/xq90/903/WUtWQJ.png"
class="thumbnail" />
<div class="info">
<h3>H3</h3>
<p>pppppp</p>
</div>
</a>
</div>
Then in CSS, refer to the entire block as a link, like this:
.frame a {
float: left;
width: 300px;
min-height: 60px;
background-color: ##00F;
margin: 0px 10px;
border: 1px solid black
}
.frame a:hover > .info > h3 {
color: green;
}
Example: codepen
I'm running into a weird glitch which only seems to happen in chrome and safari. It's hard to explain why this happens with sample code, but I'll try to illustrate what I'm doing with code, while providing a link to the actual page below.
First of all, I have an unordered list displayed inline-block, so it can be justified just like text. Each list item contains an svg in an image tag and a paragraph with a short description, both wrapped in a single anchor tag. Nothing special i guess, but here's the catch: in chrome and safari the browser renders a 1px by approximately 15px blue/blackish line between the paragraph and the image, and I have no idea why this is happening. Here's the code:
<div class="wrapper">
<div class="justified-list home-icons">
<ul>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
<li>
<a href="#">
<img src="http://voctel.wearebold.nl/wp-content/uploads/2015/02/company-building.svg" />
<br/>
<p>Description</p>
</a>
</li>
</ul>
<span class="stretcher"></span>
</div><!-- .justified-list -->
</div><!-- .wrapper -->
and here is the css (I'm using scss):
.wrapper {
width: 100%;
}
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}
Also, a codepen is provided here:
http://codepen.io/smelly586/pen/NPVVYd
If anyone has a clue on what's going on, or even better: has a possible fix for this, you have my gratitude.
Set your font-size on the element to 0. What you're seeing is the underline in the anchor element for whitespace in your HTML.
You could turn off the text-decoration: underline; that the browser renders by default for anchors, but let's assume that's not what you want to do.
Instead, the element with text will need to be reset to document root font-size (or whatever you want) using something like p { font-size: 1rem; }.
Example Codepen
So, accordingly, the SCSS/LESS would be:
.justified-list {
width: 100%;
text-align: justify;
* {
display: inline;
}
li {
display: inline-block;
vertical-align: top;
a {
font-size: 0;
p { font-size: 1rem; }
}
}
.stretcher {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}
}