Своё объявление можно представить в действительно не стандартном виде, при этом вся информация будет выглядеть достаточно компактной. Ниже описано, как можно менять по очерёдно три блока.
Во всей красе эффект можно наблюдать в браузерах семейства WebKit, Opera и Firefox 4. Все остальные браузеры будут демонстрировать перемещение блоков без анимации перехода.
Сам блок мы размещаем к примеру в HTML-верх

Код:
<div id="rotator">
    
    	<div id="block-1" class="active">
        <h2>Подзаголовок #1</h2>
        <div>
        	<h1>Здесь будет ваш первый заголовок</h1>
        	
        	<p>Здесь будет текст вашего первого блока. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
        </div>
    	</div>

    	
    	<div id="block-2" class="non-active-top">
        <h2>Подзаголовок #2</h2>
        <div>                	<h1>Здесь будет ваш второй заголовок</h1>
        	
        	<p>Здесь будет текст вашего второго блока. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
        </div>    	
    	</div>
    	
    	<div id="block-3" class="non-active-bottom">
        <h2>Подзаголовок #3</h2>
        <div>
                	<h1>Здесь будет ваш третий заголовок</h1>
        	
        	<p>Здесь будет текст вашего третьего блока. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
        </div>    	
    	</div>
    
    </div>

Подзаголовок - это тот текст, который будет отображаться, когда блок скрыт.
Текст, заключённый в тэги <h1> заглавие вашего активного блока.
Где стоит писать сам текст блока, думаю очевидно.
В HTML-верх, либо без тэгов стайл в любое из окон стилей

Код:
<style>
    #rotator {height: 280px; position: relative;  padding: 20px; }
    
    #rotator > div { 
    	position: absolute; 
    	overflow: hidden;
    	-webkit-transition: all 0.5s ease;
    	-moz-transition: all 0.5s ease;
    	-o-transition: all 0.5s ease;
    }
    #rotator > div > div { 
    	padding: 20px; 
    }
    #rotator > div > div img {
    	float: right;
    	margin: 0 0 2px 10px;
    }
    #rotator .active { top: 20px; left: 20px; width: 380px; height: 280px; }
    #rotator .non-active-top { top: 20px; left: 320px; height: 130px; width: 320px; }
    #rotator .non-active-bottom { top: 170px; left: 320px; height: 130px; width: 320px; }    
    #rotator .non-active-top:hover, #rotator .non-active-bottom:hover { 
    	cursor: pointer;
    	-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    	-moz-box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    	box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    }
    #rotator h2 {
    	text-align: center; 
    	line-height: 130px;
    }
    #rotator .active h2 {
    	display: none;
    }
	</style>

В HTML-низ

Код:
<script>
    
    $(function() {
    
    	var current;
        	
    	function rotate() {
    	
        
            	
        if (current == 1) {
        	$("#block-1").removeClass().addClass("active");
        	$("#block-2").removeClass().addClass("non-active-top");
        	$("#block-3").removeClass().addClass("non-active-bottom");
        } else if (current == 2) {
        	$("#block-1").removeClass().addClass("non-active-bottom");
        	$("#block-2").removeClass().addClass("active");
        	$("#block-3").removeClass().addClass("non-active-top");
        } else {
        	$("#block-1").removeClass().addClass("non-active-top");
        	$("#block-2").removeClass().addClass("non-active-bottom");
        	$("#block-3").removeClass().addClass("active");
        }
    	
    	}
    	
    	$("#rotator div").click(function() {
    	
        current = this.id.substr(6);    	
        rotate();
    	
    	});
    
    });
	</script>

Поигравшись с width и left блоков можно изменить ширину всего блока.

Источник
Перевод: css-tricks.com
Перевел: Сергей Фастунов