Question Xin hướng dẫn widget này

Trang http://congnghe.5giay.vn/ có widget này (Sự kiện công nghệ). Bác nào biết hướng dẫn giúp với

 

Mình có cái gần giống. Bạn xem và chỉnh lại css cho phù hợp nha
(Nhớ like nhé)
Dạng XenPortal/Block/Hotnews
Template EWRblock_HotNews

PHP:

<xen:require css="EWRblock_HotNews.css" /><div id="hotNews"><div class="hot_news">    <xen:foreach loop="$HotNews" value="$news" i="$i">            <xen:if is="{$i} < 2"><div class="item type1 fade"><div class="img">                <xen:if is="{$news.promote_icon} != 'disabled'">                    <xen:if hascontent="true">                        <xen:contentcheck>                        <xen:if is="{$news.attach}">                            <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>                        <xen:elseif is="{$news.medio}" />                            <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">                                <a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>                            </div>                        <xen:elseif is="{$news.image}" />                            <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>                        <xen:else />                            <xen:avatar user="$news" size="m" itemprop="photo" />                        </xen:if>                        </xen:contentcheck>                    </xen:if>                </xen:if></div><div class="title"><h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3></div></div>                <div class="clearFix"></div>            <xen:else /><div class="item type3 nofade">  <div class="img">                <xen:if is="{$news.promote_icon} != 'disabled'">                    <xen:if hascontent="true">                        <xen:contentcheck>                        <xen:if is="{$news.attach}">                            <a href="{xen:link threads, $news}"><img src="{$news.attach.thumbnailUrl}" alt="{$news.attach.filename}" /></a>                        <xen:elseif is="{$news.medio}" />                            <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">                                <a href="{xen:link 'full:media/popout', $news.medio}" class="OverlayTrigger"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></a>                            </div>                        <xen:elseif is="{$news.image}" />                            <a href="{xen:link threads, $news}"><img src="{$news.image}" alt="{$news.image}" /></a>                        <xen:else />                            <xen:avatar user="$news" size="m" itemprop="photo" />                        </xen:if>                        </xen:contentcheck>                    </xen:if>                </xen:if></div><div class="title"><h3><a href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h3></div></div>            </xen:if>    </xen:foreach></div></div>


Template EWRblock_HotNews.css

Mã:

#hotNews{
    float: left;
    margin-bottom: 15px;
    width: 675px;
    height: 500px;
}
.hot_news {
    background-color: #FFFFFF;
    float: left;
    margin-bottom: 10px;
    margin-top: 2px;
    padding-bottom: 10px;
}
.hot_news .item {
    float: left;
    padding: 8px 8px 0;
    position: relative;
}
.hot_news .type1 .title {
    width: 426px;
    font-size: 20px;
    outline: medium none;
}
.hot_news .type2 {
    padding-left: 0;
    width: 214px;
}
.hot_news .type2 .title {
    width: 204px;
}
.hot_news .type3 {
    height: 270px;
    padding-right: 0;
}
.hot_news .type3 .title {
    width: 204px;
}
.hot_news .type1 div.img img {
    height: 265px;
    width: 436px;
}
.hot_news .type3 div.img img {
    height: 140px;
    width: 214px;
}
.hot_news .item .title {
    height: 70px;
    padding: 5px;
    text-align: left;
}
.hot_news .fade .title {
    background: url("/styles/itviet/Images/opacity.png") repeat scroll 0 0 transparent;
    bottom: 0;
    position: absolute;
}
.hot_news .nofade .title {
    background: none repeat scroll 0 0 #E0E0E0;
}
.hot_news .type2 .title h3 {
    font-size: 140%;
    line-height: inherit;
}
.hot_news .type3 .title h3 {
    font-size: 16px;
    line-height: inherit;
}
.hot_news .type3 .title h3:hover {
    text-decoration: none;
}
.hot_news .fade .title a {
    color: #FFFFFF;
}

 

cho xin cái Demo ạ

 

Làm thử mà không được. Bạn cho cái demo xem nhé.

 

Cóai làm được hơm nhở

 

Đc

 

Cái này không có bác nào chia sẻ nhỉ