Tạo hiệu ứng phóng to, thu nhỏ ảnh khi rê chuột vào

Thảo luận trong 'Thủ thuật Xenforo' bắt đầu bởi Admin, 11/8/14.

Đọc: 8,028

  1. Admin Administrator

    Mình xin hướng dẫn các bạn tạo hiệu ứng phóng to khi rê chuột (:hover) vào các hình ảnh trong website. Hướng dẫn này áp dụng với tất cả các trang web chứ không chỉ dành riêng cho diễn đàn Xenforo. Hiệu ứng này giúp cho trang web của bạn trở nên phong cách hơn (chắc là vậy) :yaoming:. Các bạn có thể xem ví dụ bằng cách rê chuột vào các hình ảnh lớn ở trang chủ.

    Bắt đầu thôi, các bạn copy đoạn CSS dưới đây dán vào code CSS của bạn. Thêm cặp thẻ <style type="text/css">Đoạn code CSS phía dưới</style> nếu muốn đặt code này luôn trong code HTML.
    Mã:
    .hoverimage img{
    -webkit-transform:scale(0.8); /*Webkit: Thu nhỏ kích thước ảnh còn 0.8 so với ảnh gốc*/
    -moz-transform:scale(0.8); /*Thu nhỏ đối với Mozilla*/
    -o-transform:scale(0.8); /*Thu nhỏ đối với Opera*/
    -webkit-transition-duration: 0.5s; /*Webkit: Thời gian phóng to, nhỏ ảnh*/
    -moz-transition-duration: 0.5s; /*Như trên*/
    -o-transition-duration: 0.5s; /*Như trên*/
    opacity: 0.7; /*Độ mờ của hình ảnh*/
    margin: 0 10px 5px 0; /*căn đều giữa ảnh*/
    }
    .hoverimage img:hover{
    -webkit-transform:scale(1.1); /*Webkit: Tăng kích cỡ ảnh lên 1.1 lần*/
    -moz-transform:scale(1.1); 
    -o-transform:scale(1.1); 
    box-shadow:0px 0px 30px gray; /*Đổ bóng bằng CSS3*/
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray; 
    opacity: 1; /*Độ mờ của hình ảnh*/
    }
    Phần .hoverimage img là CSS của hình ảnh bình thường, .hoverimage img:hover là CSS của hình ảnh khi rê chuột vào. Bên cạnh mỗi câu mình đều có chú thích các bạn có thể thay đổi các thông số tùy thích để có những hiệu ứng đẹp nhất. :D
    Tiếp theo đó các bạn đặt hình ảnh cần phóng to, thu nhỏ vào cặp thẻ dưới đây để đoạn CSS có tác dụng
    HTML:
    <div class="hoverimage">
    <img src="URL hình ảnh" />
    </div>
    Đối với trang web bằng Xenforo, các bạn có thể chỉnh sửa các template giống như hướng dẫn trên, ví dụ như chỉnh sửa template EWRblock_RecentNewsEWRblock_RecentNews.css để tạo hiệu ứng với các hình ảnh ngoài Portal. Chúc các bạn thành công!
  2. bibiduy

    bibiduy New Member

    sao làm theo không thấy động tỉnh gì vậy ad ơi

    Đối với trang web bằng Xenforo, các bạn có thể chỉnh sửa các template giống như hướng dẫn trên, ví dụ như chỉnh sửa template EWRblock_RecentNewsEWRblock_RecentNews.css để tạo hiệu ứng với các hình ảnh ngoài Portal. Chúc các bạn thành công!
  3. Admin

    Admin Administrator Thành viên BQT

    @bibiduy :mình đã chú thích rất rõ. bạn làm theo đúng như thế sẽ đc.
    bibiduy thích bài này.
  4. bibiduy

    bibiduy New Member

    CODE NÀY ÚP LÊN CÓ CẦN CHỈN GÌ KHÔNG AD
  5. bibiduy

    bibiduy New Member

    chèn code này dưới EWRblock_RecentNews là được à ad ơi
  6. bibiduy

    bibiduy New Member

    em chèn code trên vào ở dưới EWRblock_RecentNews mà sao không thấy động tỉnh gì vậy ad ơi hay em chèn sai gì đó có sửa gì không ad
  7. Admin

    Admin Administrator Thành viên BQT

    bạn đưa code recent news với css đây mình xem thử. nhớ phải thay đúng giao diện nha
  8. bibiduy

    bibiduy New Member

    EWRblock_RecentNews
    Mã:
    <xen:require css="message_user_info.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="EWRblock_RecentNews.css" />
    
    <div id="recentNews">
    <xen:foreach loop="$RecentNews" value="$news" i="$i">
    <div class="section sectionMainPortal recentNews" id="{$news.thread_id}">
    <div class="portalBlock ">
    <div class="img-recent">
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <xen:contentcheck>
    <xen:if is="{$news.attach}">
    <a target="_blank" href="{xen:link threads, $news}" ><img src="http://res.cloudinary.com/tint/image/fetch/w_300,h_190,c_thumb/WEBSITE/{$news.attach.thumbnailUrl}" alt="{$news.title}" style="height: 190px; width: 300px;"/></a>
    <xen:elseif is="{$news.medio}" />
    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
    <a href="{xen:link 'full:media/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 target="_blank" href="{xen:link threads, $news}" ><img src="{$news.image}" alt="{$news.title}" style="width: 300px;"/></a>
    <xen:else />
    <a target="_blank" href="{xen:link threads, $news}"><img src="http://res.cloudinary.com/tint/imag...tp://design-wedding.com/forum/images/news.jpg" alt="{$news.title}" style="height: 190px; width: 300px;"/></a>
    </xen:if>
    </xen:contentcheck>
    </xen:if>
    </xen:if>
    </div>
    
    <h2 style="margin-top:10px;"><a target="_blank" class="linkportal" href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h2>
    <div class="newsText">
    {xen:helper snippet, $news.message, 150}
    </div>
    
    <span class="dateTime"><xen:Datetime time="$news.promote_date" /></span>
    
    
    <div class="clearFix"></div>
    </div>
    
    </div>
    
    </xen:foreach>
    </div>
    <div class="clearFix"></div>
    
    <xen:if hascontent="true">
    <div class="section sectionMain">
    <xen:contentcheck>
    <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
    <xen:Pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
    </xen:if>
    </xen:contentcheck>
    </div>
    </xen:if>
    
    <script type="text/javascript" src="http://kenhsinhvien.net/js/jquery/jquery.loadmore.min.js"></script>
    <script>
    jQuery.ias({
    container : '#recentNews',
    item: '.recentNews',
    pagination: '.PageNav',
    next: '.PageNav a:last',
    triggerPageThreshold: 2,
    loader: 'Đang tải thêm...',
    trigger: 'Hiển thị thêm...',
    history: false,
    onPageChange: function(pageNum, pageUrl, scrollOffset) {
    // This will track a pageview every time the user
    // scrolls up or down the screen to a different page.
    path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
    _gaq.push(['_trackPageview', path]);
    }
    });
    </script>
    
    EWRblock_RecentNews.css
    Mã:
    .img-recent {
    overflow: hidden;
    height: 190px;
    width: 300px;
    }
    .DateTime{color:#ffffff}.clearFix{clear:both}.categories{background:#fff url(http://data.sinhvienit.net/2013/T05/img/SinhVienIT.NET---link.png) no-repeat 0 0;padding-left:20px}.catportal{color:#ffffff!important;font-size:12px;font-weight:bold;margin-left:5px}.newsText{margin-top:10px;margin-bottom:10px;line-height:175%;font-size:12px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;width:100%;height:64px}.linkportal{color:#000000!important;font-size:14px;font-weight:bold}.portalBlock{-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;background:#fff}.sectionMainPortal{background-color:rgb(255, 255, 255);padding:10px;margin:10px
    auto;border:1px
    solid rgb(215, 215, 215);-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-khtml-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-khtml-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);width:294px;height:325px;float:left;margin:5px
    10px 20px 0px}.recentNews
    .subHeading{margin: -10px -10px 10px}.recentNews .subHeading
    a{color:#ffffff}.recentNews .subHeading
    h2{font-size:1.5em}.recentNews
    .messageUserBlock{float:right;margin-left:10px}.recentNews
    .newsDate{float:left;margin:0px
    10px 10px 0px;padding:0px
    10px 5px;width:35px;font-weight:bold;text-align:center}.recentNews .newsDate
    .newsMonth{padding:10px
    0px 5px !important;margin:0px
    -10px 5px !important;text-transform:uppercase}.recentNews .newsDate
    .newsDay{font-size:26px}.recentNews .leftDate
    .newsDate{margin-left: -45px}.recentNews
    .messageContent{font-size:13px}.recentNews .messageContent
    .postedBy{margin-bottom:10px;padding-bottom:5px;border-bottom:1px dashed #ffffff}.recentNews .messageContent
    .username{font-weight:bold}.recentNews .messageContent
    .comments{float:right;font-weight:bold}.recentNews .messageContent
    .clearFix{clear:right}.recentNews .iconKey
    div{background:transparent url('styles/passion/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;width:16px;height:16px;float:left;margin-right:4px}.recentNews .iconKey
    .sticky{background-position:0px -16px}.recentNews .iconKey
    .redirect{background-position: -48px -16px}.recentNews .iconKey
    .new{background-position: -64px -16px}.recentNews
    .sectionFooter{margin:10px
    -10px -10px;text-align:right;position:relative}.recentNews .sectionFooter
    .continue{padding-top:5px;font-size:12px}.recentNews .sectionFooter .continue
    .redirect{margin:3px
    4px 0px 0px}.recentNews .sectionFooter
    .categories{padding-top:5px;float:left}.recentNews .sectionFooter .categories
    li{display:inline}.recentNews .sectionFooter
    .sharePage{position:absolute}.recentNews .sectionFooter
    .shareControl{margin-top:6px !important}
    .EWRporta_Portal
    .mainContent{margin-right:0px !important}.EWRporta_Portal
    .pageContent{padding:0px
    0px 10px !important;background-color:transparent !important;-webkit-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;-moz-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;-khtml-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;border:0px
    !important}.EWRporta_Portal .breadBoxTop
    .breadcrumb{margin-right:15px !important}.EWRporta_Portal
    .mainContainer{width:680px;!important}.EWRporta_Portal
    .sidebar{width:304px;!important}.EWRporta_Portal
    .pageWidth{background-color:transparent !important}.EWRporta_Portal
    .sectionMainPortal{width:308px !important;height:340px !important;-webkit-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;-moz-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;-khtml-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;margin:5px
    10px 10px 0px !important}.EWRporta_Portal .PageNav a:hover, .EWRporta_Portal .PageNav a:focus{border:2px
    solid #ffffff;background:#000000('styles/passion/ksv/bg-pattern-orange.png');text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a.currentPage{position:relative !important;border:2px
    solid #ffffff;background:#ffffffurl('styles/passion/ksv/bg-pattern-orange.png');text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a.text{width:auto !important;padding:0px
    10px}.EWRporta_Portal .PageNav a
    element.style{}Matched CSS Rules
    .article-pagination .pagination li a:hover, .article-pagination .pagination li.active
    a{border:2px
    solid #ffffff;background:url(../images/backgrounds/bg-pattern-orange.png);text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a{color:#ffffff;width:37px !important;;height:37px !important;;display:block;text-align:center;text-decoration:none;border:2px
    solid #ffffff;font-size:18px;line-height:38px;font-weight:bold;background:#ffffffurl('styles/passion/ksv/bg-pattern-cyan.png');-webkit-border-radius:25px;-moz-border-radius:25px;-khtml-border-radius:25px;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;text-shadow:0 0 0 transparent, 1px 1px 2px rgba(51,140,162,0.65);-webkit-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-moz-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-khtml-box-shadow:4px 2px 3px rgba(178,177,163,0.4);box-shadow:4px 2px 3px rgba(178,177,163,0.4);-moz-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-webkit-box-shadow:4px 2px 3px rgba(178,177,163,0.4);margin-right:6px !important}.EWRporta_Portal .PageNav
    .pageNavHeader{padding:13px
    0 !important;font-size:12px !important;font-weight:bold;color:#ffffff;margin-right:10px;float:inherit !important}.EWRporta_Portal .PageNav
    .scrollable{height:45px !important;width:233px !important}.EWRporta_Portal .PageNav .PageNavNext, .EWRporta_Portal .PageNav
    .PageNavPrev{padding:0px
    !important}.EWRporta_Portal .sectionMainPortal:hover{webkit-box-shadow:0 0 5px #ffffff;-moz-box-shadow:0 0 5px #ffffff;-khtml-box-shadow:0 0 5px #ffffff;-webkit-box-shadow:0 0 5px #ffffff;-moz-box-shadow:0 0 5px #ffffff;-khtml-box-shadow:0 0 5px #ffffff;box-shadow:0 0 5px #ffffff;border:1px
    solid #ffffff;transition:0.2s}.bbCodeBlock{margin-top:1em;margin-bottom:1em;margin-left:0;border:1px
    solid #ffffff;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px}

  9. Admin

    Admin Administrator Thành viên BQT

    Thay lại như này @bibiduy
    HTML:
    <xen:require css="message_user_info.css" />
    <xen:require css="bb_code.css" />
    <xen:require css="EWRblock_RecentNews.css" />
    
    <div id="recentNews">
    <xen:foreach loop="$RecentNews" value="$news" i="$i">
    <div class="section sectionMainPortal recentNews" id="{$news.thread_id}">
    <div class="portalBlock ">
    <div class="img-recent">
    <xen:if is="{$news.promote_icon} != 'disabled'">
    <xen:if hascontent="true">
    
    <xen:contentcheck>
    <xen:if is="{$news.attach}">
    <a target="_blank" href="{xen:link threads, $news}" ><div class="hoverimage"><img src="http://res.cloudinary.com/tint/image/fetch/w_300,h_190,c_thumb/WEBSITE/{$news.attach.thumbnailUrl}" alt="{$news.title}" style="height: 190px; width: 300px;"/></div></a>
    <xen:elseif is="{$news.medio}" />
    <div style="background: url('{xen:helper medio, $news.medio}') no-repeat;">
    <a href="{xen:link 'full:media/media/popout', $news.medio}" class="OverlayTrigger"><div class="hoverimage"><img src="styles/8wayrun/EWRmedio_play.png" width="160" height="90" /></div></a>
    </div>
    <xen:elseif is="{$news.image}" />
    <a target="_blank" href="{xen:link threads, $news}" ><div class="hoverimage"><img src="{$news.image}" alt="{$news.title}" style="width: 300px;"/></div></a>
    <xen:else />
    <a target="_blank" href="{xen:link threads, $news}"><div class="hoverimage"><img src="http://res.cloudinary.com/tint/imag...tp://design-wedding.com/forum/images/news.jpg" alt="{$news.title}" style="height: 190px; width: 300px;"/></div></a>
    </xen:if>
    </xen:contentcheck>
    </xen:if>
    </xen:if>
    </div>
    
    <h2 style="margin-top:10px;"><a target="_blank" class="linkportal" href="{xen:link threads, $news}" class="newsTitle">{$news.title}</a></h2>
    <div class="newsText">
    {xen:helper snippet, $news.message, 150}
    </div>
    
    <span class="dateTime"><xen:Datetime time="$news.promote_date" /></span>
    
    
    <div class="clearFix"></div>
    </div>
    
    </div>
    
    </xen:foreach>
    </div>
    <div class="clearFix"></div>
    
    <xen:if hascontent="true">
    <div class="section sectionMain">
    <xen:contentcheck>
    <xen:if is="{$option.pagenav} && {$option.count} > {$option.limit}">
    <xen:Pagenav link="articles" linkdata="{$category}" page="{$page}" perpage="{$option.limit}" total="{$option.count}" />
    </xen:if>
    </xen:contentcheck>
    </div>
    </xen:if>
    
    <script type="text/javascript" src="http://kenhsinhvien.net/js/jquery/jquery.loadmore.min.js"></script>
    <script>
    jQuery.ias({
    container : '#recentNews',
    item: '.recentNews',
    pagination: '.PageNav',
    next: '.PageNav a:last',
    triggerPageThreshold: 2,
    loader: 'Đang tải thêm...',
    trigger: 'Hiển thị thêm...',
    history: false,
    onPageChange: function(pageNum, pageUrl, scrollOffset) {
    // This will track a pageview every time the user
    // scrolls up or down the screen to a different page.
    path = jQuery('<a/>').attr('href',pageUrl)[0].pathname.replace(/^[^\/]/,'/');
    _gaq.push(['_trackPageview', path]);
    }
    });
    </script>
    HTML:
    .img-recent {
    overflow: hidden;
    height: 190px;
    width: 300px;
    }
    .DateTime{color:#ffffff}.clearFix{clear:both}.categories{background:#fff url(http://data.sinhvienit.net/2013/T05/img/SinhVienIT.NET---link.png) no-repeat 0 0;padding-left:20px}.catportal{color:#ffffff!important;font-size:12px;font-weight:bold;margin-left:5px}.newsText{margin-top:10px;margin-bottom:10px;line-height:175%;font-size:12px;overflow:hidden;text-overflow:ellipsis;-o-text-overflow:ellipsis;width:100%;height:64px}.linkportal{color:#000000!important;font-size:14px;font-weight:bold}.portalBlock{-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-khtml-border-radius:3px;border-radius:3px;background:#fff}.sectionMainPortal{background-color:rgb(255, 255, 255);padding:10px;margin:10px
    auto;border:1px
    solid rgb(215, 215, 215);-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;-webkit-border-radius:4px;-moz-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-khtml-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-webkit-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-moz-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);-khtml-box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);box-shadow:0 4px 4px rgba(0, 0, 0, 0.1);width:294px;height:325px;float:left;margin:5px
    10px 20px 0px}.recentNews
    .subHeading{margin: -10px -10px 10px}.recentNews .subHeading
    a{color:#ffffff}.recentNews .subHeading
    h2{font-size:1.5em}.recentNews
    .messageUserBlock{float:right;margin-left:10px}.recentNews
    .newsDate{float:left;margin:0px
    10px 10px 0px;padding:0px
    10px 5px;width:35px;font-weight:bold;text-align:center}.recentNews .newsDate
    .newsMonth{padding:10px
    0px 5px !important;margin:0px
    -10px 5px !important;text-transform:uppercase}.recentNews .newsDate
    .newsDay{font-size:26px}.recentNews .leftDate
    .newsDate{margin-left: -45px}.recentNews
    .messageContent{font-size:13px}.recentNews .messageContent
    .postedBy{margin-bottom:10px;padding-bottom:5px;border-bottom:1px dashed #ffffff}.recentNews .messageContent
    .username{font-weight:bold}.recentNews .messageContent
    .comments{float:right;font-weight:bold}.recentNews .messageContent
    .clearFix{clear:right}.recentNews .iconKey
    div{background:transparent url('styles/passion/xenforo/xenforo-ui-sprite.png') no-repeat 10000px 0;width:16px;height:16px;float:left;margin-right:4px}.recentNews .iconKey
    .sticky{background-position:0px -16px}.recentNews .iconKey
    .redirect{background-position: -48px -16px}.recentNews .iconKey
    .new{background-position: -64px -16px}.recentNews
    .sectionFooter{margin:10px
    -10px -10px;text-align:right;position:relative}.recentNews .sectionFooter
    .continue{padding-top:5px;font-size:12px}.recentNews .sectionFooter .continue
    .redirect{margin:3px
    4px 0px 0px}.recentNews .sectionFooter
    .categories{padding-top:5px;float:left}.recentNews .sectionFooter .categories
    li{display:inline}.recentNews .sectionFooter
    .sharePage{position:absolute}.recentNews .sectionFooter
    .shareControl{margin-top:6px !important}
    .EWRporta_Portal
    .mainContent{margin-right:0px !important}.EWRporta_Portal
    .pageContent{padding:0px
    0px 10px !important;background-color:transparent !important;-webkit-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;-moz-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;-khtml-box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;box-shadow:0px 0px 12px rgba(50, 50, 50, 0) !important;border:0px
    !important}.EWRporta_Portal .breadBoxTop
    .breadcrumb{margin-right:15px !important}.EWRporta_Portal
    .mainContainer{width:680px;!important}.EWRporta_Portal
    .sidebar{width:304px;!important}.EWRporta_Portal
    .pageWidth{background-color:transparent !important}.EWRporta_Portal
    .sectionMainPortal{width:308px !important;height:340px !important;-webkit-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;-moz-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;-khtml-box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;box-shadow:0px 1px 5px rgba(0, 0, 0, 0.15) !important;margin:5px
    10px 10px 0px !important}.EWRporta_Portal .PageNav a:hover, .EWRporta_Portal .PageNav a:focus{border:2px
    solid #ffffff;background:#000000('styles/passion/ksv/bg-pattern-orange.png');text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a.currentPage{position:relative !important;border:2px
    solid #ffffff;background:#ffffffurl('styles/passion/ksv/bg-pattern-orange.png');text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a.text{width:auto !important;padding:0px
    10px}.EWRporta_Portal .PageNav a
    element.style{}Matched CSS Rules
    .article-pagination .pagination li a:hover, .article-pagination .pagination li.active
    a{border:2px
    solid #ffffff;background:url(../images/backgrounds/bg-pattern-orange.png);text-shadow:0 0 0 transparent, 1px 1px 2px rgba(214,115,25,0.65)}.EWRporta_Portal .PageNav
    a{color:#ffffff;width:37px !important;;height:37px !important;;display:block;text-align:center;text-decoration:none;border:2px
    solid #ffffff;font-size:18px;line-height:38px;font-weight:bold;background:#ffffffurl('styles/passion/ksv/bg-pattern-cyan.png');-webkit-border-radius:25px;-moz-border-radius:25px;-khtml-border-radius:25px;border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;text-shadow:0 0 0 transparent, 1px 1px 2px rgba(51,140,162,0.65);-webkit-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-moz-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-khtml-box-shadow:4px 2px 3px rgba(178,177,163,0.4);box-shadow:4px 2px 3px rgba(178,177,163,0.4);-moz-box-shadow:4px 2px 3px rgba(178,177,163,0.4);-webkit-box-shadow:4px 2px 3px rgba(178,177,163,0.4);margin-right:6px !important}.EWRporta_Portal .PageNav
    .pageNavHeader{padding:13px
    0 !important;font-size:12px !important;font-weight:bold;color:#ffffff;margin-right:10px;float:inherit !important}.EWRporta_Portal .PageNav
    .scrollable{height:45px !important;width:233px !important}.EWRporta_Portal .PageNav .PageNavNext, .EWRporta_Portal .PageNav
    .PageNavPrev{padding:0px
    !important}.EWRporta_Portal .sectionMainPortal:hover{webkit-box-shadow:0 0 5px #ffffff;-moz-box-shadow:0 0 5px #ffffff;-khtml-box-shadow:0 0 5px #ffffff;-webkit-box-shadow:0 0 5px #ffffff;-moz-box-shadow:0 0 5px #ffffff;-khtml-box-shadow:0 0 5px #ffffff;box-shadow:0 0 5px #ffffff;border:1px
    solid #ffffff;transition:0.2s}.bbCodeBlock{margin-top:1em;margin-bottom:1em;margin-left:0;border:1px
    solid #ffffff;-webkit-border-radius:5px;-moz-border-radius:5px;-khtml-border-radius:5px;border-radius:5px}
    .hoverimage img{
    -webkit-transform:scale(0.8); /*Webkit: Thu nhỏ kích thước ảnh còn 0.8 so với ảnh gốc*/
    -moz-transform:scale(0.8); /*Thu nhỏ đối với Mozilla*/
    -o-transform:scale(0.8); /*Thu nhỏ đối với Opera*/
    -webkit-transition-duration: 0.5s; /*Webkit: Thời gian phóng to, nhỏ ảnh*/
    -moz-transition-duration: 0.5s; /*Như trên*/
    -o-transition-duration: 0.5s; /*Như trên*/
    opacity: 0.7; /*Độ mờ của hình ảnh*/
    margin: 0 10px 5px 0; /*căn đều giữa ảnh*/
    }
    .hoverimage img:hover{
    -webkit-transform:scale(1.1); /*Webkit: Tăng kích cỡ ảnh lên 1.1 lần*/
    -moz-transform:scale(1.1);
    -o-transform:scale(1.1);
    box-shadow:0px 0px 30px gray; /*Đổ bóng bằng CSS3*/
    -webkit-box-shadow:0px 0px 30px gray;
    -moz-box-shadow:0px 0px 30px gray;
    opacity: 1; /*Độ mờ của hình ảnh*/
    }
    
    bibiduy thích bài này.
  10. bibiduy

    bibiduy New Member

    ad ơi chỉn cho em luôn cột 3 cho em luốn ad của em mới 2 cột hii

Chia sẻ trang này