I have added a Image as a link on my MVC4 website and when i hover over the image a nasty grey highlight appears, is there a way to remove it?
Here is my code below:
<div class="float-left">
<p>
<a href="#Url.Action('Index')">
<img alt="HomePage" style="verticalalign:middle;" height="30px" src="~/Images/formvalue_logo.png">
</a>
</p>
</div>
Thanks in advance.
Try -
.float-left img:hover, .float-left a:hover{
background: none;
background-color: transparent;
}
a img, a img:hover { background-image: none; background-color: transparent; }
might fix your problem... if not, try:
a:hover img, a img:hover { background-image: none; background-color: transparent; }
If that doesn't do the trick, then the background is on the 'a' tag rather than the image, and you'll need to do this:
a { background-image: none; background-color: transparent; }
although this will affect every link on the page, so it might be better to put a class on the link (e.g. myClass), and style using that:
a.myClass, a.myClass img, a.myClass img:hover { background-image: none; background-colour: transparent; }
Related
body {
background-color: #f6f7d4;
}
h1, h3, hr {
color: #68b8ab;
}
hr {
width: 100px;
border-style: dotted none none;
border-color: gray;
border-width: 5px;
}
img {
background-color: black;
}
The above one is my external css code, but it doesn't work on my html page as you see in the image below.
Unfortunately it's not possible to change colors IN photos/images, but you can add a filter on to it, for example filter: hue-rotate(50deg); (skew the hue to change all colors in the photo) or filter: grayscale(30%);
I would name the image with a css class so you don't target all images on your site, something like this:
<img class="portrait" src="../path/to/img/my-portrait.jpg">
And then the css:
img.portrait {
filter: grayscale(30%);
}
img{
background-color: yellow;
}
<img src='https://cdn.sstatic.net/Sites/stackoverflow/company/Img/logos/so/so-icon.png?v=c78bd457575a'/>
As said in comment, if you have plain images you will not be able to see the background color as the images will cover it all. It will work only with images with transparency.
Can anyone please work out why the background colour for my text-links appear on my image-links despite my every effort to disable it?
I made a Fiddle
<div class="pink">
<p>
The link
</p>
<a class="imagelink nohover" href="#" target="_blank">
<img src="http://www.royalcanin.ca/~/media/Royal-Canin-Canada/Product-Categories/cat-adult-landing-hero.ashx" alt="image" style="max-width:476px;max- height:275px;border:0;">
</a>
</div>
The CSS
.pink {
background-color: pink;
}
.pink a {
color: white;
}
.pink img a:hover {
background-color: transparent !important;
}
.imagelink:not(.nohover):hover{
background-color: transparent !important;
}
.pink a:hover {
text-decoration: none;
color: white;
background-color: blue;
}
The issue is, that the .pink a:hover applies to all links in your div container, if you set a CSS class specifically to your link you want to style your problem is solved
HMTL
The link
CSS
.pink .style-only-this:hover {
text-decoration: none;
color: white;
background-color: blue;
}
Working fiddle: https://jsfiddle.net/25wqoxn0/1/
I replaced the css hover written for image,
.imagelink:not(.nohover):hover{
background-color: transparent !important;
}
New:
.imagelink.nohover:hover{
background: transparent;
}
Check the updated fiddle
I've built a site with TYPO3 (4.7.2) which has a nice graphical menu on the right hand side (see here). But this is not so user-friendly nor is it easy to maintain, as it is a bit of a hack and doesn't use "Typo3-Standards", but just some general HTML/CSS-hacking:
the menu's html is:
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="/fileadmin/images/baehr_katalog2.png" />
</a>
</p>
and the corresponding CSS:
#kat a {
background: url("/fileadmin/images/baehr_katalog2_hover.png") no-repeat;
display:block; height:120px; width:220px; /* Linkbereich begrenzen */
}
#kat img {
display:block; width:220px; height:120px; border:0;
}
#kat a:hover img {
visibility: hidden;
}
So basically I show the image with white font in "standard mode" and when the mouse hovers, that image is hidden and the same image (with black font) in the background becomes visible. I thought this was quite nice, and it did not need any JS :-)
But I'm wondering if there is a way to do this more elegant, robust and user-friendly (perhaps with TYPO's tools?), so that the user could change images if needed without having to worry about CSS...
edit: I found a solution requiring one image! (Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
But still I wonder if there's not a more TYPO-esque solution around? ;-)
If you don't use text links (only image) you are able to switch properties like this:
#kat a {
text-decoration: none;
display: block;
width: 220px;
}
#kat a img {
border: 0;
max-width: 100%;
height: auto;
display: block;
opacity: .5;
}
#kat a:hover img {
opacity: 1;
transition: opacity 1s ease 0s;
}
<p id="kat">
<a target="_blank" href="http://www.fusspflege.com/elkat/op/">
<img src="http://lorempixel.com/440/220"/>
</a>
</p>
As edited in the q, I found a solution:
Text is in transparent colour and the CSS has this:
#kat a:hover img {
background-color: black;
}
(In order to avoid issues created by non-CI fonts and to maintain good looks etc., I prefer captions as part of img vs. CSS-styled text.)
I have the following code and I still see the border under an image. Any idea?
a, a:visited {
color: #000000;
border-bottom: 2px solid black;
padding-bottom: 2px;
text-decoration: none;
}
img {
border: 0;
}
Maybe I should add that I'm working locally...
Code Example: http://jsfiddle.net/8WzMJ/
You put an image inside anchor and give border bottom to anchor, to remove that, remove border from the anchor
a,
a:visited {
color: #000000;
padding-bottom: 2px;
text-decoration: none;
}
or add class to anchor and style it without border
<a class="without-border" href="http://www.seobook.com/images/smallfish.jpg">
<img src="http://www.seobook.com/images/smallfish.jpg" />
</a>
.without-border {
border: none;
}
Without seeing your code, I don't know what the impact of this might be, but you could try:
img{
float:left;
padding-bottom:2px;
}
i have a problem, i'm working on a gallery php script and need help, i have a picture, it has a lightgray border around, and if theres a mouseover event, i want the border to turn gray. how can i do that?
thanks in advance
Use the :hover pseudo class. For example:
<html>
<head>
<style>
IMG.HoverBorder {border:5px solid #eee;}
IMG.HoverBorder:hover {border:5px solid #555;}
</style>
</head>
<body>
<img class="HoverBorder" src="test.png" />
</body>
</html>
The above code works well on all sane browsers I have access to. If you need IE 6 support, take a deep breath and check this out (thanks to #Brian Kim for reminding me about IE6):
<html>
<head>
<style>
a:hover{ background-color:white; }
a:link img, a:visited img{ border:5px solid #eee; }
a:hover img{ border:5px solid #555; }
</style>
</head>
<body>
<img class="HoverBorder" src="03 messed up status log edit IE6.png" />
</body>
</html>
There are several variants on this approach--I suggest you click through to that site for other options that might be more suitable to your situation.
You can use the :hover pseudo-class.
For example:
<style>
a.bordered:hover img {
border: solid 2px grey;
}
</style>
<img src="..." />
use .mypictureclass:hover to apply the border.
but also apply a transparent border to the picture display class to avoid it jumping when the border is added.
okay dudes i've got it XD as i said, i'm a html guy, and i just found out how it works, it used a CSS as style, so i tried much things, and, surprise, i just made a copy of the imagethumbnail-tag and changed the bordercoler and edited the title to imagethumbnail:hover
thank y'all as well :)
<style type="text/css">
body,td,th {
font-size: 14px;
color: #FFF;
}
body {
background-color: #000;
}
a {
font-size: 14px;
color: #FFF;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #CCC;
}
a:active {
text-decoration: none;
color: #FC3;
}
a:img,
a:link img,
a:visited img,
a:focus img,
a:hover img,
a:active img {
border: none;
}
</style>
The code follows everything I've seen so far, but still isn't displayed in IE correctly & shows borders around the images. This is a sample of one of the mouseover images.
<a href="index.html">
<img src="images/buttons/home.png" alt="Home" width="216" height="44"
onmouseover="this.src='images/buttons/home_.png'" onmouseout="this.src='images/buttons/home.png'"></a>