Hiệu ứng nở hoa cho hình ảnh

Posted by Ly Nha Truc - - 3 nhận xét

Bạn muốn tạo sự khác biệt ở một bức ảnh nào đó mà không biết làm sao cho ấn tượng thì thủ thuật đơn giản sau sẽ giúp bạn giải quyết vấn đề đó.
Trước tiên bạn thử rê chuột vào hình ảnh bên dưới xem coi nó như thế nào?

Bạn có thích hiệu ứng này không?

Vâng, nếu bạn thích thì hãy làm theo các bước sau đây:

- Đặt đoạn code sau đây vào trước thẻ ]]></b:skin>
.gobump img{
border: 1px solid #ccc;
float: left;
margin: 15px;
-webkit-transition: margin 0.5s ease-out;
-moz-transition: margin 0.5s ease-out;
-o-transition: margin 0.5s ease-out;
border-radius: 5px 5px 5px 5px;
}
.gobump img:hover {
margin-top: 2px;

Xong rồi bạn lưu template lại.

Bây giờ mỗi khi bạn post ảnh, ảnh sẽ có dạng như thế này:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s1600/gobump.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="167" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s200/gobump.jpg" /></a></div>

Bạn chỉ cần thêm vào như sau:

<div class="separator" style="clear: both; text-align: center;">
<a class="gobump" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s1600/gobump.jpg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="167" width="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3DmUXKL8nTrb7T5dvrTs6KakAVtyb130CAemXwnY1XbtEPEjWlEKSYnsRSx-SFDNm3hY5bA3KiGLXYlJiB8Ls1j0aULjZWL4HEI5zp6R54mV4AQ6ZQrDEShgfQIKEoBvJ79x5QDUsouuh/s200/gobump.jpg" /></a></div>

Chúc các bạn thành công!

3 Responses so far.

  1. @Quan Pham Đang nghiên cứu coi làm cái menu kiểu nào cho nó đẹp, tạm thời để xài đỡ :)

  2. @May Thy Hôm trước mình có báo, có lẽ do sót :)

Leave a Reply