How To Hide Alt Text Using Css When The Image Is Not Present?

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?

Solution 1:

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

Solution 2:

How about using font-size: 0? It works in hiding alt text before image loads or if image src URL is not available.

Solution 3:

You can use text-indent:-9999px

HTML

<imgsrc="images/test.jpg"alt="alternative">

CSS

img{
  text-indent:-9999px
}

Demo

Solution 4:

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.

Solution 5:

You could also use the onerror callback to set the display property to none:

<imgsrc="images/test.txt"onerror="this.style.display='none';">