Is it possible to hide the alt text using CSS in all the browsers,
I tried with color:transparent, it is working in all browsers except IE.
Is it possible to do it in IE using CSS?. Thanks in advance for any help.
9 Answers
How about using font-size: 0? It works in hiding alt text before image loads or if image src URL is not available.
1 Comment
Victor Eke
Only solution that works. Removing it from view using text-indent and overflow didn't work
The kellum method:
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Also don't have the performance drawback of -9999px method where browser draw a box with size of 9999px.
Further explanation: replacing-the-9999px-hack-new-image-replacement
Comments
You can use text-indent:-9999px
HTML
<img src="images/test.jpg" alt="alternative">
CSS
img{
text-indent:-9999px
}
2 Comments
Gaurav Aggarwal
if we add
line-height then text-indent will work in all browsers...its better to use line-height:1em;
Raynal Gobel
using
text-indent: -9999px will make browser draws unnecessary 9999 empty space. Use the kellum methodYou could also use the onerror callback to set the display property to none:
<img src="images/test.txt" onerror="this.style.display='none';">
1 Comment
St. Jan
I was already wondering why nobody was including the error part in their anwser.
Instead of using color:transparent; use display:none;.
But you should not use this technique.
As @Quentin said in the comment:
If the text isn't good enough for humans then it isn't good enough for search engines.
You should not hide the alt text. Google knows this only used for SEO purpose and nothing important and will penalize for such. And you may be blacklisted on Google Search Engine.
So, don't use them just for SEO purpose.
answered Mar 30, 2016 at 10:15
Bhojendra Rauniyar
86k36 gold badges179 silver badges241 bronze badges
5 Comments
Mohamed Hussain
thanks @Bhijendra Nepal Color is having the value transparent see the spec w3.org/TR/css3-color/#transparent. Display :none won't solve my purpose
Bhojendra Rauniyar
Sorry, I was presuming that.
Mohamed Hussain
@BhojendraNepal: happen to all sometimes including me, no issues thanks for help
Mohamed Hussain
@BhojendraNepal: Thanks again for your edit in the answer, I like to hide the alt text which is coming as default from the browser unstyled , but nowhere i mentioned, i hidden it from the user i.e., I could use pseudo selector using content: attr(alt) and I like to avoid FOUC eventually.
Bhojendra Rauniyar
any reason for downvote and unaccepted for this answer?
This seems to work for me. Just add it to your img styles:
text-indent: -100%;
overflow: hidden;
answered Jul 17, 2022 at 8:54
Artur Müller Romanov
6,17323 gold badges117 silver badges196 bronze badges
Comments
Use text-indent: -9999px; and display: none.
HTML
<h1 class="technique-four">
<a href="#">
<img src="images/header-image.jpg" alt="CSS-Tricks" />
</a>
</h1>
CSS:
h1.technique-four {
width: 350px; height: 75px;
background: url("images/header-image.jpg");
text-indent: -9999px;
display: none;
}
Comments
I think this is a best solution:
img {
text-indent: -100vw;
overflow: hidden;
}
An empty image is centered and alt text is not displayed. Also it does not overflow over other images.
Comments
This worked:
img {
color: rgba(0, 0, 0, 0) !important;
}<img src="example.jpg" alt="text you don't want to show for those who can see, but make it visible for screen readers" />transparent neither worked for me.
Comments
text-indent: -9999px;