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?

Answer 1

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

http://cssdeck.com/labs/0r7hlsnt

<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.