Share code Hotnews tạm được dùng CSS3 cho Xenforo.

Voc ra cái này, anh/em nào thấy ưng mắt thì lấy về dùng nha.
Đây là block Hotnews sử dụng CSS3.
Demo thì mình đang sài đây: http://www.zshare.vn/

EWRblock_News1

Mã:

<xen:require css="message_user_info.css" />
<xen:require css="bb_code.css" />
<xen:require css="EWRblock_News1.css" />
<div class="jm-item second">
                <xen:foreach loop="$News1" value="$news" i="$i">
                <xen:if is="{$i}>6">
                <xen:if is="{xen:number $news.view_count}>=30">
                <a href="{xen:link threads, $news}" title="{$news.title}">
    <div class="jm-item-wrapper">
        <div class="jm-item-image">
                            <xen:if is="{$news.attach}">
                                <img class="imgresize2" src="index.php?attachments/{$news.attach.filename}.{$news.attach.attachment_id}" alt="{$news.attach.filename}" />
                            <xen:elseif is="{$news.medio}" />
                                <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
                                <img class="imgresize2" src="styles/8wayrun/EWRmedio_play.png" />
                                </div>
                            <xen:elseif is="{$news.image}" />
                                <img class="imgresize2" src="{$news.image}" alt="{$news.image}" />
                            <xen:else />
                                <img class="imgresize2" src="styles/noimg.jpg" />
                            </xen:if>
            <div class="jm-item-description">
{xen:helper snippet, $news.message, 300}
            </div>
        </div>
        <div class="jm-item-title"><p style="padding: 0px 5px;">{xen:helper snippet, $news.title, 25}</p></div>
    </div>
    </a>
    </xen:if>
    </xen:if>
    </xen:foreach>
</div>

EWRblock_News1.css

Mã:

            .imgresize2 {
            width: 224px;
            height: 170px;
            }
.jm-item {
    -padding: 10px;
    display: inline-block;
    text-align: left;
}
.jm-item-wrapper {
    position: relative;
    background: none repeat scroll 0% 0% #E8D7B6;
    float: left;
    margin: 3px;
    border: 1px solid #007F74;
}
.jm-item-image {
    position: relative;
    overflow: hidden;
}
.jm-item-image img {
    display: block;
}
.jm-item-title {
    background: none repeat scroll 0% 0% #007F74;
    font-weight: normal;
    text-transform: uppercase;
    font-family: "Oswald",sans-serif;
    color: #FFF;
    padding: 4px 0px;
    position: absolute;
    bottom: 0px;
    width: 100%;
}
.jm-item-overlay {
    background: #000;
    opacity: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0.5s ease-in 0s;
    -moz-transition: opacity 0.5s ease-in 0s;
    -o-transition: opacity 0.5s ease-in 0s;
    transition: opacity 0.5s ease-in 0s;
}
.jm-item-wrapper:hover .jm-item-overlay {
    opacity: 0.3;
}
.jm-item-button {
    height: 50px;
    width: 50px;
    text-align: center;
    position: absolute;
    left: 50%;
    margin-left: -25px;
}
.jm-item-button a {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    background: #FF6B0E;
    text-transform: uppercase;
    font-family: 'Oswald', sans-serif;
    color: #FFFFFF;
    font-size: 1.2em;
    line-height: 50px;
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
    text-decoration: none !important;
    display: block;
}
.jm-item-button a:hover {
    background: #3b3b3b;  
}
.second .jm-item-wrapper .jm-item-title {
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all 0.2s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-title {
    -left: -100%;
}
.second .jm-item-description {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;  
    background: rgba(0,0,0,0.4);
    color: #fff;
    top: 100%;
    -webkit-transition: all 0.5s ease-in 0s;
    -moz-transition: all 0.5s ease-in 0s;
    -o-transition: all 0.5s ease-in 0s;
    transition: all 0.5s ease-in 0s;
}
.second .jm-item-wrapper:hover .jm-item-description {
    top: 0;
}

Thay đổi cho phù hợp với diễn đàn của bạn nhé. Cảm ơn bạn đã xem bài!

 

Spam hả

 

Đẹp quá , Hóng bác fix cái kia hộ e ạ

 

Bạn có thể PM yahoo VipByTeam38@gmail.com
Mình sẽ Teamview giúp nếu bạn chưa làm được.

 

Cám ơn bác nhiều ạ