Hiệu ứng hover góc tròn và shadows cho hình ảnh sử dụng CSS

Dưới đây là một số phong cách thay đổi biên giới ảnh với hiệu ứng hover(rê chuột) mà bạn có thể áp dụng đối với hình ảnh trên blogger bằng cách sử dụng CSS.

Một trong những lợi thế của CSS3 là chúng ta có thể áp dụng làm tròn biên giới mà không có quá nhiều phức tạp, chúng ta cũng có thể thêm một số hiệu ứng chuyển động như bóng đổ và đường viền tròn đi kèm với quá trình chuyển đổi.
Hiệu ứng hover góc tròn và shadows cho hình ảnh sử dụng CSS

Tại phần đăng bài mới bên HTML hoặc khi thêm một tiện ích,tùy theo yêu cầu ta sử dụng các code dưới đây.
Từ hình ảnh minh họa của bài đăng sẽ ứng với mỗi demo là code của hiệu ứng(Di chuột vào hình ảnh để xem hiệu ứng)
DEMO 1:
DEMO
Code:
<style>
.post-body img {
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>
DEMO 2:
DEMO
Code:
<style>
.post-body img {
background:#FFF; /* background color around the image */
padding:15px; /* space between border and image */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 0% 50%; /* Rounded border */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>
DEMO 3:
DEMO
Code:
<style>
.post-body img {
background:#FFF; /* the background color around the image */
padding:15px; /* The Space Between Border and Image */
border-radius: 50% 0; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius:0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>
DEMO 4:
DEMO
Code:
<style>
.post-body img {
box-shadow: 0px 0px 15px #000; /* Shadow */
border-radius: 50%; /* Rounded border */
border:0;
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
box-shadow: 0; /* With this we remove the shadow (value 0) */
border-radius: 0; /* This removes the border roundness (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>
DEMO 5:
DEMO
Code:
<style>
.post-body img {
border-radius: 45% / 20%; /* Rounded border */
box-shadow: 0px 0px 15px #000; /* Shadow */
padding:0;
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
}
.post-body img:hover {
border-radius: 0; /* This removes the roundness of border (value 0) */
-moz-transition: all 1s;
-webkit-transition: all 1s;
-o-transition: all 1s;
cursor:pointer;
}</style>
<div style="text-align: center;">
<img class="rounded" src="Link hình ảnh" /></div>
Chúc thành công!
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji