Replacing images with their alt text if mobile screen size

Question

E.g. I have a logo that when the screen size gets below 480px the images hides and its alt text is shown as a replacement.

I was wondering if there is a simple pure CSS solution or will I need to use jQuery?

Unfortunately no, even with CSS generated content (which is the only way I could see this working with CSS) it can't work, as an `img` can't contain any content. This will definitely require JavaScript, if not necessarily the jQuery library. — David says reinstate Monica, Jun 11 '13 at 15:47
What purpose will this serve? If you're trying to save mobile users some bandwidth, this won't work. The images will begin downloading before you can use JavaScript to remove them from the DOM. — cimmanon, Jun 11 '13 at 15:50
Its for a purely aesthetic reason, I want to swap out a logo for small text... — chris, Jun 11 '13 at 15:52

score 3 · Accepted Answer · edited Jun 11 '13 at 16:39

3

The only thing you can really do with CSS is use your standard image replacement technique for your desired breakpoint.

<h1>Meow</h1>

@media (min-width: 480px) {
  h1 {
    background: url(http://placekitten.com/400/200) no-repeat;
    height: 200px;
    text-indent: -100em;
  }
}

Any image replacement technique will do.

edited Jun 11 '13 at 16:39

Hemerson Varela

answered Jun 11 '13 at 15:56

cimmanon

adding onto your comment that you can't use the after/before psuedo elements on images or form elemnts, i checked http://www.w3.org/TR/selectors/#gen-content and http://www.w3.org/TR/2009/CR-CSS2-20090908/generate.html and nowhere can i find where this is accurate, and this would be useful to know! – ddavison Jun 11 '13 at 16:11

score -1 · Answer 2 · answered Jun 11 '13 at 15:54

-1

With the appropriate media queries, can you do:

img::after {
    content: attr('alt');
}

Still,

img {
    display: none;
}

might hide the after section too.

answered Jun 11 '13 at 15:54

Eric Jablow

1

You can't use before/after pseudo elements on images (or form controls). – cimmanon Jun 11 '13 at 15:54
@cimmanon im curious now. where does it say you can't? don't see the limitation at http://www.w3.org/TR/selectors/#gen-content – ddavison Jun 11 '13 at 16:04
And I now see in the CSS2 spec, Section 12.1: "This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification." CSS 3 offers nothing further. They might add such behavior, but I wouldn't hold my breath. Sorry. – Eric Jablow Jun 11 '13 at 17:07
You can't put anything _inside_ an element. – Owen Nov 11 '15 at 14:09

2 Answers2