Hiệu ứng ảnh chuyển tiếp Hover Image CSS3

Hình ảnh tinh khiết di chuột có hiệu lực với CSS3. Bài viết trước đây của tôi về hình ảnh di chuột có hiệu lực với CSS3. nhưng lần này chúng tôi sẽ cung cấp cho một hiệu ứng khác nhau để chuyển đổi khối Bút chì. hoạt động gần như cùng một cách sử dụng thư bị trả lại nới lỏng jquery.

Hướng dẫn hình ảnh Hover Effect Với CSS3

Chọn Phần tử trang --> Thêm tiện ích -->HLTM/Java và dán toàn bộ code sau đây vào :

<div class="main">
    <div class="view effect">
         <a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOxsIZPzns7X22WfdjzemZiqAsQp0RrwCdPJXl2l9JfG_ep-I5a6yd7_Cy1aLHRfzfPa0-Kup9hWREJLYygU3ab2VwG_K12rueAbClAcR3-rzpvOHkobY4FQxQ8lb69o_ylY4EHT1BvUCE/s1600/dinda-ayu-nastoi.jpg" /></a>
         <div class="mask"></div>
    </div>              
</div>

Tìm thẻ  ]]></b:skin> dán code sau vào trước thẻ ]]></b:skin> vừa tìm được :

.main {
  position:relative;
  width:650px;
  margin:0 auto;
  padding:5px 10px;
}
/* seleksi gambar dengan mengatur berbagai.
ukuran,border,opacity,dan lain sebagainya */
.view {
  width:300px;
  height:200px;
  margin:10px;
  border:5px solid #fff;
  overflow:hidden;
  position:relative;
  text-align:center;
  box-shadow:0 0 5px #aaa;
  cursor:default;
}

.view .mask {
  width:300px;
  height:200px;
  position:absolute;
  overflow:hidden;
  top:0;
  left:0;
}

.view img {
  display:block;
  position:relative;
}
/* hasilkan efek animasi
dengan memulai sesuatu pseudo element
dan berbagai efek trasition lainnya */
.effect img {
  opacity:0.2;
  -moz-transition:all 0.3s ease-in;
}

.effect .mask {
  cursor:pointer;
  opacity:1;
  visibility:visible;
  border:100px solid rgba(0,0,0,0.7);
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  -moz-transition:all 0.4s cubic-bezier(0.940,0.850,0.100,0.620);
}
.effect:hover .mask {
  border:0 double rgba(0,0,0,0.7);
  opacity:0;
  visibility:hidden;
}
.effect:hover img {
  opacity:1;
}

Ghi Chú :

- Sử dụng-moz-chuyển tiếp: tất cả 0.3s dễ dàng trong, cho mozilla mà sẽ xác định hiệu quả tổng thể được tạo ra bởi mịn (mịn).
<div class="view effect"> : Dòng này để lựa chọn các thuộc tính <img>. và chúng tôi sẽ tạo ra một hiệu ứng di chuột với HTML <div lại class="mask"></ div> mà không có nó chúng ta có thể tạo ra hiệu ứng hình ảnh động. nhưng nó sẽ thu hẹp và hạn chế. nhiều hình ảnh động rộng rãi CSS nếu HTML đã được quy định.