Верстка анонса новостей на WP

Здравствуйте. Помогите пожалуйста.

Хотелось бы услышать мнение бывалых верстальщиков. Вобщем, на главной странице должны определенным образом выводиться анонсы статей. Определенным с точки зрения дизайна. Я сделал с горем пополам, выводиться как надо, но подозреваю что сильно намудрил с кодо, есть некоторые артефакты.

Так должно выводиться в итоге, так и выводиться, но есть проблемы -

При загрузке страницы на несколько сек все это выглядит вот так -

Вот от этого нужно как то избавиться, я понимаю почему это все так выглядит, но нужна ваша помощь.

Сама структура анонса выглядит так -

Смысл такой. Титл (н2)- должен идти поверх всего и если название статьи длинное должен залазить на картинку.

по сути все сделано при помощи 2х div и атрибута z-index.

Но во время подгрузки почему то браузер подгружает не частями все, сначала как самые легкие - h2, а потом к ним сам анонс и картинки.

Ниже приведу код, может можно как то сделать все это проще?

P.S. На картинки наложен эффект полупрозрачности, при наведении становиться нормалной прозрачности

Вывод

<div id="anyclass" >



<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><img src="<?php bloginfo('stylesheet_directory'); ?>/timthumb.php?src=<?php echo catch_that_image() ?>&amp;h=140&amp;w=280&amp;q=60&amp;zc=1"  class="img-left" /></a>

</div>

<div class="woter" >

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>



     

     <span><?php the_content_limit("$secret_word", ""); ?> </span>

    </div> 

    <div style="clear:both;"></div>

Css

.woter{



height:142px;



width:650px;

position: absolute;



border: 1px solid #203040;

padding: 0px 0px 0 0;



}

*html .woter { /* хак для ie6 */

background: none; /* убираем обычный background */

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/11.png'); /* png с прозрачностью для ие6 */

}



.woter h2 a{

padding: 0px;

border: 1px solid #203040;

z-index: 1000;

position    : absolute;

background        : rgb(255, 255, 255); /* на случай, если следующая строка не сработает */

background        : rgba(255, 255, 255, 1);    

}



.woter h2 a:hover{

z-index: 1000;

}



.woter span p{

width: 370px;

margin:0px 10px 0px 10px;

padding:30px 5px 5px 0px;

font:  11px Helvetica, Sans-Serif;

color:#000;

}

.grad1 {

z-index: 800;

position    : absolute;

border: 0px solid #203040;

background: url(images/11.png) top right repeat-y;

height:148px;

width:44px;

padding:0px 0px 0px 390px;

}





#anyclass A IMG{

z-index: 700;

border: 0px solid #203040;

opacity:0.3; -moz-opacity:0.3; filter:alpha(opacity=60);}



#anyclass a:hover img {

z-index: 700;

opacity:1.0; -moz-opacity:1.0; filter:alpha(opacity=100);background:none;}



#anyclass a img {

z-index: 700;

OPACITY:0.3px;

-MOZ-OPACITY:0.3px;

FILTER:alpha(opacity=60)

}



#anyclass a:hover img {

z-index: 700;

OPACITY:1px;

-MOZ-OPACITY:1px;

FILTER:alpha(opacity=100);

BACKGROUND:none

}