You are here: Blog » Tutorials » CSS Window Resize – Fading an HTML Element In and Out

CSS Window Resize – Fading an HTML Element In and Out

resize_css

Intro

A while back I wrote a post about how you can fade html elements in and out using jQuery — depending on the width of the browser window. In this tutorial, I will show you how this can be done much simpler using only CSS3.

How to do it

The CSS

Note that I am using 925 pixels for the minimum window width required. Replace that number with whatever is appropriate for your site.

Summary of What’s Going On

By initially adding the CSS transition property to the element, we prepare it to animate towards whatever CSS changes may occur. The animation will last .5 seconds (half a second). Using CSS media queries, we set the opacity to be 0 when the window is below 925 pixels wide. Now when the browser window gets re-sized to below 925 pixels, the element will fade out to 0 opacity (invisible). Conversely, when the window gets re-sized to be above 925 pixels, the element will fade in to 1 opacity (totally solid).

This entry was posted in Tutorials and tagged , by .

Author: justin saad

Justin Saad is first and foremost a husband and a father of four. He is also a web developer and designer who has been making websites for over fifteen years. His company is called The Motech Network and his website is ClevelandWebDeveloper.com. In addition to building websites, Justin makes WordPress plugins and likes writing tutorials to help others learn about various aspects of web development.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">