Image swapping on mobile done easily

Standard

Just a quick post, a way of changing images without much hassle.

This uses a CSS pseudo elements. We hide the desktop image and simply use the a:after pseudo element within the media queries.

Stick this into your media queries (Also have a method of hiding images on mobile)

#swap a:after {
content: url('mobile image link');
}

Add this to your HTML.

<span id="swap"><a href="##" style="text-decoration:none !important;"><img alt="alt tag" border="0" src="desktop image link" style="display: block" class="hide"></a></span>

I’ve only briefly tested this on iPhone, let me know how you all get on!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s