Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

HIệu ứng phóng to ảnh khi dê chuột vào trong blogspot

Chủ đề thuộc danh mục 'Hướng dẫn/Thủ thuật Blogspot tại đây' được đăng bởi NND, 3/10/14.

Lượt xem: 3,842

  1. NND Banned

    Em mới tham gia cộng đồng cũng không có nhiều, xin đóng góp 1 số thủ thuật nhỏ cho anh em nào có nhu cầu
    Đây là thủ thuật em sưu tập được từ Bittuot và một số cao thủ blog khác nhưng nhớ rõ nên không dẫn nguồn ở đây được. Có gì mong các anh em bỏ quá cho.
    Sau đây mình xin gửi tới các bạn cách tạo hIệu ứng phóng to ảnh khi dê chuột vào ảnh trong blogspot. Mọi người có thể xem demo tại trang giaydankinhnnd.com để biết thêm nhé.

    [​IMG]

    - Thêm đoạn Code dưới đây trước thẻ</head>


    Code:
    <style type="text/css"> .hovergallery img{ -webkit-transform:-scale(0.8); /*Webkit: Scale down image to 0.8x original size*/ -moz-transform:-scale(0.8); /*Mozilla scale version*/ -o-transform:-scale(0.8); /*Opera scale version*/ -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/ -moz-transition-duration: 0.5s; /*Mozilla duration version*/ -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: [COLOR=#b30000]0.9[/COLOR]; /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between images*/ } .hovergallery img:hover{ -webkit-transform:-scale(1.1); /*Webkit: Scale up image to 1.2x original size*/ -moz-transform:-scale(1.1); /*Mozilla scale version*/ -o-transform:-scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px gray; /*CSS3 shadow: 30px blurred shadow all around image*/ -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/ -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity: 1; } </style>
    - Khi viết bài có hình ảnh vào cửa sổ HTML và dán code sau:

    Code:
    <div class="hovergallery">
    
    <img src="Link ảnh" />
    
    <img src="Link ảnh" />
    
    </div>
    Chúc các bạn thành công! Thân ái

  2. Bùi Minh Khánh

    Bùi Minh Khánh Mới đăng kí

    cái này hay
  3. NND

    NND Banned

    ad trang này quả là chu đáo, thấy các mem viết bài chưa chuẩn là chỉnh sửa giùm luôn, cảm ơn nhiều nhé

Ủng hộ diễn đàn