CODEWITHSUNDEEP
cssimagealt
Cain Nuke
Cain Nuke

Reputation: 3083

Don't show image, only alternate text with CSS

Is it possible to have CSS render an image invisible so only the alternate text shows?

I have an image that doesn't look good on mobile devices so I rather show the alternate text instead and style it accordingly.

Upvotes: 1

Views: 3189

Answers (2)

Martin54
Martin54

Reputation: 1862

Try this

html

<div class="example">
<image src="img.jpg" alt="alternative text">
</div>

css

@media (max-width: 767px) { /* change to any number you want */
    div.example img{
        display:none;
    }
    div.example:after{
        content:"alternative text";
    }
}

Upvotes: 2

Rio
Rio

Reputation: 21

IF you're able to tell if visitor is on mobile why not just hide the image and show regular text? If you're using responsive CSS that knows mobile size or not you can just do it via CSS.

<style>
.isMobileView #BlurryImg{display:none;}
.isMobileView #MobileTxt(display:block;}
</style>
<img id="BlurryImg" src="image.gif" alt="some text"/>
<span id="MobileTxt" style="display:none;">some text</span>

Upvotes: 0

Related Questions