Роман Якушев

<li>
     <a href="index.html">
         <span class="glyphicon glyphicon-rocket"></span>
                На главную
      </a>
</li>

и на пк делаете span float: right
а на мобильном span display:block;

1. Быстрее взять готовую и переверстать её. Но лучше написать самому, начать можно с этого Как сверстать тему для WordPress
2. Я создаю свои. И много... очень много проблем. При том не решаемых. Глянь хотя бы мои вопросы.
3. Я для таких целей использую Simple Fields

прим. к 1. быстрее так же переверстать тему bootstrap. Я находил одну, ставил её, и перевёрстывал. Чуть ускоряет процесс, но сейчас я вообще пишу свою тему\шаблон для wordpress на bootstrap'e

Ну и вообще если верстал для Drupal - для Wordpress проблем не будет.

Только javascript.
Я делал на jquery:

var $c_elems = $('.moduletable_circle').find('li');
		var c_count = $c_elems.length;
		var c_delta = Math.PI * 2 / c_count;
		var c_x = $('#sec2').outerWidth()/2; 
console.log('c_x=',c_x);
		var c_y = $('#sec2').outerHeight()/2; 
console.log('c_y=',c_y);
		var c_angle = 0;
		var c_left;
		var c_top;
		var c_dlin= 270;
		
		for (var i = 0; i < c_count; i++) {
			c_left = c_dlin * Math.cos(c_angle) + c_x + 'px';
			c_top = c_dlin * Math.sin(c_angle) + c_y + 'px';
			
			$c_elems.eq(i).css({
				'position':'absolute',
				'left':c_left,
				'top':c_top
			});

			c_angle += c_delta;
		}

при этом элементы должны быть position: absolute;

html:

<div class="moduletable_circle"> 
	<div id="sec2" style="position: relative;">
		<ul>
			<li></li>
			<li></li>
		</ul>
	</div>
</div>

jquery.malsup.com/cycle2
там и тач и прочие плюшки.

две картинки рядом внутри тега "a".
Вторая по умолчанию display:none
при наведении меняешь display:none первой
и display:block второй

p.s. они у тебя всё равно одинаковых размеров все

твой код:

<div class="alignleft post_thumbnail">
<a href="http://blog.sk8er.name/lytdybr/samoprezentaciya.html" title="$$$ Самопрезентация $$$">
<img width="190" height="130" src="/wp-content/plugins/kama-thumbnail/thumb/1017e5901_190x130.png" alt="$$$ Самопрезентация $$$">
</a>
</div>

твой код css в файле
blog.sk8er.name/wp-content/themes/sk8er/style.css
в строке 64:

.post_thumbnail {
background:none repeat scroll 0 0 #FFF;
box-shadow:0 0 3px #CCC;
margin:0 5px 5px 0;
padding:3px;
}

замените на

.post_thumbnail {
background:none repeat scroll 0 0 #FFF;
box-shadow:0 0 3px #CCC;
margin:0 5px 5px 0;
padding:3px;
}
.post_thumbnail > a {
	position:relative;
	display:block;
}
.post_thumbnail > a:before {
	display:none;
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: url('<<путь к изображению>>');
}
.post_thumbnail > a:hover:before {
	display:block;
}

это как пример.
а вообще тебе стоит идти на htmlbook.ru

409841.boco.web.hosting-test.net/assets/template/c...
строка 143
кусок кода

.menu-row {
width: 100%;
background: url(../images/menu-row-tail.gif) center top repeat-x #178fbe;
}

заменить на

.menu-row {
width: 100%;
background: url(../images/menu-row-tail.gif) center top repeat-x #178fbe;
position: relative;
z-index: 10;
}

твоя кроссбаузерность не нужна крутым конторам. вот смотри:
допустим у тебя хочет заказать сайт крутая контора по производству. что им надо?
1. уникальный функционал (php или javascript) - какой нибудь калькулятор или типа того.
2. красивая, стабильная версия для браузеров.

про первое думаю понятно почему. про второе сейчас объясню:
крутые конторы, опять же, производство, продают кому? правильно, партнёрам крупным поставщикам и прочим таким же не хилым компаниям как и они сами. а в этих нехилых компаниях работают обычные менеджеры. и что, скажешь ты? а как раз оно.
допустим компания ищет другую компанию производство. и поручает это дело тем самым офисным работникам. и что, офисный работник будет дома, вечерочком в своё свободное время искать твой сайт который ты сделал? нет, они будут искать на работе, где стоят обычные ПК. вот и всё. я зарабатываю около 10к в мес. на колымах, и ни один ещё у меня не покупал версию для мобильников и для планшетов. потому что они нацелены не на ту аудиторию.

да и вообще, без JS и PHP развиваться дальше некуда. так что мой совет - смело брать проекты с JS и PHP и пробовать их делать. (конечно после того как хоть что то будешь уметь)

да и jquery значительно облегчит тебе js кодинг, нежели чистый js. опять же, как уже писали выше.

как вариант - поместить изображение не внутрь круга, а на фон круга.

на jquery пишешь сам скрипт.
перехватываешь событие прокрутки, и анализируешь его.
ставишь соответствие грубо говоря:
позиция экрана - x;
граница (показать, скрыть) - y;
x < y - компонент показан.
x > y - компонент скрываешь с анимацией js или css, без особой разницы;
это будет независимая анимация от прокрутки.
Можно делать прям зависимую, когда положение прокрутки соответствует положению этого элемента.

я делал такое. у меня при прокрутке появлялись элементы сайта =)

но ты можешь и воспользоваться сторонними плагинами:
ruseller.com/lessons.php?rub=32&id=1325
ruseller.com/adds.php?rub=10&id=2548

ооо я недавно столкнулся с такой же проблемой, всё не так просто.
надо проверять z-index у родительских элементов, а так же порядок их положения в дереве. Это влияет. можно поставить z-index>9999, но это не поможет, если у родителя z-index:1.
в общем вот где можно разобраться: То, что вам никто не говорил...