When I use an img tag inside of an a tag, these little lines at the bottom show up. I've tried several css properties to remove them and couldn't find one that did the trick.
Relevant html:
<a href='https://github.com/'>
<img class='ContactLink' src='Images/Icons/GitHub.png' alt='GitHub'>
</a>
<a href='https://twitter.com/'>
<img class='ContactLink' src='Images/Icons/Twitter.png' alt='Twitter'>
</a>
<img class='ContactLink' src='Images/Icons/Gmail.png' alt='Email'>
CSS:
.ContactLink{
height: 50px;
width: 50px;
border: 0;
}
///Add this code in CSS file
a {
text-decoration:none;
}
use normalize css or try this
a,a:focus,a:hover,a:active{
text-decoration:none;
outline-width: 0;
}
img {
display:inline-block;
}
I will suggest to check the image files using any tool like photoshop and see if there is any transparent pixel there for that icon. Also try to keep the dimensions of all the three icon exactly same. If required edit the image accordingly.
I am new to all of this and wanted to know how to enlarge my image when I hover over it.
So far I have tried this.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John's" />
<span>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" />
<br />St John's, Baldock
</span>
</li>
All this does is makes a small image and a large image. I don't know how to use css so if you respond please can it be in HTML code.
Also the HTML code that is coming up in the text box beneath is not what I have written and don't know how to change that.
Thanks for any help in advance.
Sarah
You should really look into CSS or Javascript as otherwise hovering is a near-impossible task. Heres what you can do:
First off, remove the span and use a class to identify the thumbnail.
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="thumbnail" />
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/03/St-Johns-Pop-up.jpg" class="large-image" />
<br />St John’s, Baldock
</li>
</ul>
Now add some CSS, don't worry, it's rather simple. What we want to accomplish is that when you hover over the thumbnail, we display the larger image. So on hover, we hide the thumbnail and show the larger image. But since we're hiding the thumbnail, we can't hover on it, so we also want to keep displaying the larger image until our cursor moves away from it entirely.
<style type="text/css">
.enlarge .thumbnail + img {
display: none;
}
/* Hovering over the thumbnail, hide the thumbnail */
.enlarge .thumbnail:hover {
display: none;
}
/* Hovering over the thumbnail, show the large image and keep showing it when hovering over the image */
.enlarge .thumbnail:hover + img,
.enlarge .thumbnail + img:hover {
display: block;
}
</style>
The .enlarge select all elements with class="enlarge", the .thumbnail does the same for the class thumbnail. img selects every image element, and the + in the middle says to select any element that comes directly after the preceding, so the line simply reads: select any img element that comes after a .thumbnail element that is inside a .enlarge element. The :hover seems self-explanatory, but here goes anyway: a : selector is called a pseudo-selector and defines a state or meta element (meta elements are elements you can stylise but aren't really there, like ::before and ::after). Metas usually use a ::. There are other pseudo-states as well, like :active. The style that is defined here will only be invoked when that state is invoked. Its the easiest way to make a hover happen!
You can, however, do this with just one image as well:
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150px" height="100px" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
It simplifies your styling a lot:
<style type="text/css">
.enlarge-image {
width: 150px;
height: auto;
}
/* Show full size on hover */
.enlarge-image:hover {
/* This can be any size you want it to be as well. */
width: auto;
}
</style>
A couple of notes on your code: first off, be aware you have typographic quotes (” compared to regular quotes: ") surrounding your image source. This can lead to issues. Second, an image size is always in pixels unless defined in %, so ommit px from your width and height.
.enlarge-image {
width: 50px;
height: auto;
}
.enlarge-image:hover {
width: auto;
}
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" width="150" height="100" alt="St John’s" class="enlarge-image" />
<br />St John’s, Baldock
You should start learning css. It is the only way to fix it.
<head>
<style type="text/css">
.picture{
width : 150px;
height : 100px;
}
.picture:hover{
width : 200px;
height : 150px;
}
</style>
</head>
<ul class="enlarge">
<li>
<img src="http://bhushan.wcukdev.co.uk/wp_239/dev/wp-content/uploads/2015/02/Optimized-DSC_0077.jpg" class="picture" alt="St John’s " />
</li>
</ul>
Figured it out, but now it looks rubbish. Anyone know how to hide the other photos when I hover and enlarge one photo as they just move around the larger photo.
That's what I have. I still cant post a photo of what it looks like. Also the last photo when you hover over it it flickers, is this my code or the size of the screen?
Above answer are correct. I am providing you some link which will help you.
http://cssdemos.tupence.co.uk/image-popup.htm
http://jsfiddle.net/4AM3S/
How can I hide the broken image icon?
Example:
I have an image with error src:
<img src="Error.src"/>
The solution must work in all browsers.
There is no way for CSS/HTML to know if the image is broken link, so you are going to have to use JavaScript no matter what
But here is a minimal method for either hiding the image, or replacing the source with a backup.
<img src="Error.src" onerror="this.style.display='none'"/>
or
<img src="Error.src" onerror="this.src='fallback-img.jpg'"/>
Update
You can apply this logic to multiple images at once by doing something like this:
document.addEventListener("DOMContentLoaded", function(event) {
document.querySelectorAll('img').forEach(function(img){
img.onerror = function(){this.style.display='none';};
})
});
<img src="error.src">
<img src="error.src">
<img src="error.src">
<img src="error.src">
Update 2
For a CSS option see michalzuber's answer below. You can't hide the entire image, but you change how the broken icon looks.
Despite what people are saying here, you don't need JavaScript at all, you don't even need CSS!
It's actually very doable and simple with HTML only.
You can even show a default image if an image doesn't load. Here's how...
This also works on all browsers, even as far back as IE8 (out of 250,000+ visitors to sites I hosted in September 2015, ZERO people used something worse than IE8, meaning this solution works for literally everything).
Step 1: Reference the image as an object instead of an img. When objects fail they don't show broken icons; they just do nothing. Starting with IE8, you can use object and img tags interchangeably. You can resize and do all the glorious stuff you can with regular images too. Don't be afraid of the object tag; it's just a tag, nothing big and bulky gets loaded and it doesn't slow down anything. You'll just be using the img tag by another name. A speed test shows they are used identically.
Step 2: (Optional, but awesome) Stick a default image inside that object. If the image you want actually loads in the object, the default image won't show. So for example you could show a list of user avatars, and if someone doesn't have an image on the server yet, it could show the placeholder image... no JavaScript or CSS required at all, but you get the features of what takes most people JavaScript.
Here is the code...
<object data="avatar.jpg" type="image/jpeg">
<img src="default.jpg" />
</object>
... Yes, it's that simple.
If you want to implement default images with CSS, you can make it even simpler in your HTML like this...
<object class="avatar" data="user21.jpg" type="image/jpeg"></object>
...and just add the CSS from this answer -> https://stackoverflow.com/a/32928240/3196360
Found a great solution at https://bitsofco.de/styling-broken-images/
img {
position: relative;
}
/* style this to fit your needs */
/* and remove [alt] to apply to all images*/
img[alt]:after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
font-family: 'Helvetica';
font-weight: 300;
line-height: 2;
text-align: center;
content: attr(alt);
}
<img src="error">
<br>
<img src="broken" alt="A broken image">
<br>
<img src="https://images-na.ssl-images-amazon.com/images/I/218eLEn0fuL.png" alt="A bird" style="width: 120px">
If you will add alt with text alt="abc" it will show the show corrupt thumbnail, and alt message abc
<img src="pic_trulli.jpg" alt="abc"/>
If you will not add alt it will show the show corrupt thumbnail
<img src="pic_trulli.jpg"/>
If you want to hide the broken one
just add alt="" it will not show corrupt thumbnail and any alt message(without using js)
<img src="pic_trulli.jpg" alt=""/>
If you want to hide the broken one
just add alt="" & onerror="this.style.display='none'" it will not show corrupt thumbnail and any alt message(with js)
<img src="pic_trulli.jpg" alt="abc" onerror="this.style.display='none'"/>
4th one is a little dangerous(not exactly)
, if you want to add any image in onerror event, it will not display even if Image exist as style.display is like adding. So, use it when you don't require any alternative image to display.
display: 'none'; // in css
If we give it in CSS, then the item will not display(like image, iframe, div like that).
If you want to display image & you want to display totally blank space if error, then you can use, but also be careful this will not take any space. So, you need to keep it in a div may be
Link https://jsfiddle.net/02d9yshw/
I think the easiest way is to hide the broken image icon by the text-indent property.
img {
text-indent: -10000px
}
Obviously it doesn't work if you want to see the "alt" attribute.
in case you like to keep/need the image as a placeholder, you could change the opacity to 0 with an onerror and some CSS to set the image size. This way you will not see the broken link, but the page loads as normal.
<img src="<your-image-link->" onerror="this.style.opacity='0'" />
img {
width: 75px;
height: 100px;
}
I liked the answer by Nick and was playing around with this solution. Found a cleaner method. Since ::before/::after pseudos don't work on replaced elements like img and object they will only work if the object data (src) is not loaded. It keeps the HTML more clean and will only add the pseudo if the object fails to load.
object {
position: relative;
float: left;
display: block;
width: 200px;
height: 200px;
margin-right: 20px;
border: 1px solid black;
}
object::after {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
content: '';
background: red url("http://placehold.it/200x200");
}
<object data="http://lorempixel.com/200/200/people/1" type="image/png"></object>
<object data="http://broken.img/url" type="image/png"></object>
If you need to still have the image container visible due to it being filled in later on and don't want to bother with showing and hiding it you can stick a 1x1 transparent image inside of the src:
<img id="active-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>
I used this for this exact purpose. I had an image container that was going to have an image loaded into it via Ajax. Because the image was large and took a bit to load, it required setting a background-image in CSS of a Gif loading bar.
However, because the src of the was empty, the broken image icon still appeared in browsers that use it.
Setting the transparent 1x1 Gif fixes this problem simply and effectively with no code additions through CSS or JavaScript.
Using CSS only is tough, but you could use CSS's background-image instead of <img> tags...
Something like this:
HTML
<div id="image"></div>
CSS
#image {
background-image: url(Error.src);
width: //width of image;
height: //height of image;
}
Here is a working fiddle.
Note: I added the border in the CSS on the fiddle just to demonstrate where the image would be.
The same idea as described by others works in React as follow:
<img src='YOUR-URL' onError={(e) => e.target.style.display='none' }/>
Use the object tag. Add alternative text between the tags like this:
<object data="img/failedToLoad.png" type="image/png">Alternative Text</object>
http://www.w3schools.com/tags/tag_object.asp
You can follow this path as a css solution
img {
width:200px;
height:200px;
position:relative
}
img:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: inherit;
height: inherit;
background: #ebebeb url('http://via.placeholder.com/300?text=PlaceHolder') no-repeat center;
color: transparent;
}
<img src="gdfgd.jpg">
Since 2005, Mozilla browsers such as Firefox have supported the non-standard :-moz-broken CSS pseudo-class that can accomplish exactly this request:
/* for display purposes so you can see the empty cell */
td { min-width:64px; }
img:-moz-broken { display:none; }
img[src="error"]:-moz-broken { display:initial; } /* for demo purposes */
<table border="1"><tr><td>
<img src="error">
</td><td>
<img src="error" alt="error image">
</td><td>
<img src="error" alt="">
</td><td>
<img src="broken" alt="broken image">
</td><td>
<img src="broken" alt="">
</td><td>
<img src="https://i.stack.imgur.com/Mkdgc.png"
alt="A bird" style="width: 120px">
</td></tr></table>
There are several cells in this example. From left to right:
A broken image without alt attribute (baseline): show a broken image
A broken image with alt text (baseline): show the alt text
A broken image with empty alt text (baseline): show the alt text (nothing)
A broken image with alt text (our CSS): hide the broken image
A broken image with empty alt text (our CSS): show the alt text (nothing)
A functional image with alt text (our CSS): show the image
img::before also works in Firefox 64 (though once upon a time it was img::after so this is not reliable). I can't get either of those to work in Chrome 71.
The most compatible solution would be to specify alt="" and to use the Firefox-specific CSS.
Note that a broken image with an empty alt attribute doesn't guarantee the broken image icon will be suppressed, but that does seem to be the behavior in Firefox 103 and Chromium 103. Also note that this violates accessibility guidelines since screen readers will not be able to describe items with empty alt text and that may be disruptive to blind users' experiences.
Missing images will either just display nothing, or display a [ ? ] style box when their source cannot be found. Instead you may want to replace that with a "missing image" graphic that you are sure exists so there is better visual feedback that something is wrong. Or, you might want to hide it entirely. This is possible, because images that a browser can't find fire off an "error" JavaScript event we can watch for.
//Replace source
$('img').error(function(){
$(this).attr('src', 'missing.png');
});
//Or, hide them
$("img").error(function(){
$(this).hide();
});
Additionally, you may wish to trigger some kind of Ajax action to send an email to a site admin when this occurs.
The trick with img::after is a good stuff, but has at least 2 downsides:
not supported by all browsers (e.g. doesn't work on Edge https://codepen.io/dsheiko/pen/VgYErm)
you cannot simply hide the image, you cover it - so not that helpful when you what to show a default image in the case
I do not know an universal solution without JavaScript, but for Firefox only there is a nice one:
img:-moz-broken{
opacity: 0;
}
edit: doesn't actually solve the asked issue, but might still be useful.
This is what I did with SASS/SCSS. I have utility scss file that contains this mixin:
#mixin fallback() {
background-image: url('/assets/imgs/fallback.png');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
}
Its usage in .scss
img {
// ...
#include fallback();
}
You can use before and after as a style to prevent the broken image.
<img src="Error.src">
img:before {
content: url("image.jpg");
}
img:after {
content: "(url: " attr(src) ")";
}
In this case, if the image in the src is broken, it will use the before content, and if there is no error it will use the src.
I'm going to build on others' answers. Instead of hiding the tag (which may have important styling), feed it a dummy image:
<img src="nonexistent.png" onerror="this.src=`data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'></svg>`;"/>
Angular way of hiding the broken image.
Inside Html file
<img *ngIf="showImage" [src]="url" (error)="showImage = false">
Inside Ts file
public showImage = true;
In theory:
Strictly "css only", we have no clean options. See other answers, I have nothing to add.
In practice:
I'd say adding a class on error event is the best way to go. Here's what I mean - and there were answers almost like this, the principle is the same, it's just more elegant if you don't add the style declarations directly. Instead, add a class that can be targeted later:
<img src="..." onerror="this.classList.add('notfound')">
And NOW you can style the hell out of it, using img.notfound as selector. You can make it a habit to add this little fragment to all your images; won't hurt anything until you style it.
Side note, before anyone comments "this is not a css-only solution": yes, thank you captain, indeed it's not. I'm trying to help with the problem itself, a problem many may have, instead of just looking at the exact wording.
This is an old question but here is something that works, the main trick here is never set a fixed height and width on the image i only use percentage.
.example {
background-color: #e7e7e7;
padding: 25px;
}
.image-box {
height: 50px;
width: 50px;
border-radius: 8px;
background-color: rgb(241, 255, 255);
color: rgb(241, 245, 249);
overflow: hidden;
display: block;
position: relative;
}
.image {
display: block;
max-width: 100%;
height: 100%;
object-fit: cover;
}
<div class="example">
<span class="image-box">
<img class="image" src="/broken.jpeg" alt>
</span>
</div>
Hide image alt with this
img {
color: transparent;
}
A basic and very simple way of doing this without any code required would be to just provide an empty alt statement. The browser will then return the image as blank. It would look just like if the image isn't there.
Example:
<img class="img_gal" alt="" src="awesome.jpg">
Try it out to see! ;)
For future googlers, in 2016 there is a browser safe pure CSS way of hiding empty images using the attribute selector:
img[src="Error.src"] {
display: none;
}
Edit: I'm back - for future googlers, in 2019 there is a way to style the actual alt text and alt text image in the Shadow Dom, but it only works in developer tools. So you can't use it. Sorry. It would be so nice.
#alttext-container {
opacity: 0;
}
#alttext-image {
opacity: 0;
}
#alttext {
opacity: 0;
}
An article over on askthecssguy.com shows how to change/invert an image on scroll using fixed backgrounds: http://askthecssguy.com/articles/mike-asks-the-css-guy-about-a-scrolling-trick-with-background-images/
My goal takes this concept further by having the image float over other elements (in this case images).
You can see the result here: http://playground.iamkeir.com/invert-logo/v2/
However, my implementation uses superfluous elements and, so, I was wondering if anyone had any ideas/suggestions of another way to achieve this?
Javascript is certainly an option but I worry it would not be lean/elegant. Someone also suggested using Canvas.
Any ideas welcomed! Thank you.
You can avoid extra markup by using :after CSS pseudo element. Thus, your final markup will look like:
<ul>
<li class="light">
<img src="http://farm3.static.flickr.com/2802/4253151258_7d12da9e1c_z.jpg" />
</li>
<li class="dark">
<img src="http://farm1.static.flickr.com/31/66005536_d1c5afca29_z.jpg?zz=1" />
</li>
<li class="light">
<img src="http://farm4.static.flickr.com/3574/3646151231_0c68f4f974_z.jpg" />
</li>
<li class="dark">
<img src="http://farm4.static.flickr.com/3432/3310214210_813d13c899_z.jpg" />
</li>
</ul>
And the altered CSS will be:
.dark:after,
.light:after,
.dark .after,
.light .after {
position: absolute;
display: block;
content: '';
top: 0; left: 0;
height: 100%;
width: 76px;
background: transparent url(logo-white.png) no-repeat fixed 0 0;
z-index: 5;
}
.dark:after,
.dark .after {
background-image: url(logo-black.png);
}
Notice that there is .after class there. This is to make it work in IE<8, which, sadly, requires to use an expression:
.dark,
.light {
behavior: expression( !this.before ? this.before = this.innerHTML = '<div class="after"></div>' + this.innerHTML : '' );
}
While using expressions is generally discouraged, this one shouldn't affect the performance too much, since it is fully evaluated only once, and when the element is created, the condition returns false.
There is one pitfall, though. If IE8 works in IE8/IE8 mode, the pseudo-elements will be under the images, unless you set negative z-index for the latter, which isn't always acceptable.
You can look at working example here.
what you're trying to do is totally possible using the current code you just need to use absolute positioning to move the content around. For example using the test page http://askthecssguy.com/examples/fixedBackgroundImages/example01.html you can modify the .header class and make it like this.
.header {
background: url("images/cuckoo_color.jpg") no-repeat fixed 20px 20px #DBDED1;
left: -151px;
padding: 40px 40px 40px 300px;
position: absolute;
}
Doing this will make the text float over the images. Going a step further instead of using a background image you could insert a transparent PNG into it's own DIV and float it over any position on the page and keep it's position fixed. You can checkout http://www.w3schools.com/css/css_positioning.asp for some examples.
Hope that helps!
Virgil
Does anyone know how can I control the image source from the CSS?
I need to be able to change the image src from the CSS. I have loop printing < img id=.. > tags, and for every id it different image. I want to be able to set the source by its id from the style css area.
Does anyone know how to do this?
This is not possible: The image's source is part of the markup, not CSS.
The only workaround would be having div elements with background-image properties instead. Those you could set from within the style sheet:
<div id="image1"></div>
#image1 { width: 100px; height: 50px; background-image: url(image.gif); }
However, with this method you lose all the img tag's advantages like
The ability to set an alt text
Resizing
Printing (most browsers don't print background images)
Search engine indexing (probably)
the only other alternative is by using JavaScript, but that obviously won't work if JavaScript is disabled, which makes it a no-no in my view.
This is now possible with CSS3 using the Content style.
I use this to swap images within a slider based on window size through media queries.
Edit: When I originally posted this, I was unaware that it only worked in Webkit at the moment. But I doubt it will take long before it gains more functionality across browsers.
HTML
<img class="img1" src="image.jpg">
CSS
#media (min-width: 768px) {
.img1 {
content: url(image.jpg);
}
}
#media (max-width: 767px){
.img1 {
content: url(new-image.jpg);
}
}
That is not possible with CSS.
However, this is very easy with Javascript:
document.getElementById("IdOfImage").src = "SourceOfImage";
You cannot really do that, however, if you do need to do that using CSS, you can do it for two images with the same size like this:
<style>
img {
width:0;
height:0;
display:block;
background: url('2.png') no-repeat bottom left;
padding-left:196px;
padding-bottom:187px;
}
</style>
<img src="1.png">
Only tested it in FF3.6 though.
I found this article that might be useful. It actually changes background of an image
here is the example in case website goes missing:
HTML
<html>
<body>
<div class="header">
<img class="banner" src="http://notrealdomain1.com/banner.png">
</div>
</body>
</html>
CSS
/* All in one selector */
.banner {
display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */
}
If you don't want to use backgrounds nor use javascript, you layer 2 images with different src on top of each other (using absolute positioning) and use CSS to hide one or another. Visually it will be the same then changing the src.