Lại một hiệu ứng Hover Image đẹp dành cho các bạn

views

A+A-

PrintEmail

Lại một hiệu ứng Hover Image đẹp dành cho các bạn kết hợp cùng với Icon của ionicons. Hi vọng các bạn sẽ thích thú với chia sẻ này

Demo Hiệu Ứng Hover Image

Mã nguồn

Bước 1: Thêm HTML
Mẹo: Bấm nút để copy code

<figure class="snip1566">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample14.jpg" alt="sq-sample14" />
  <figcaption><i class="ion-android-add"></i></figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1566 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample17.jpg" alt="sq-sample17" />
  <figcaption><i class="ion-android-open"></i></figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1566"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample19.jpg" alt="sq-sample19" />
  <figcaption><i class="ion-android-star-outline"></i></figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1566"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sq-sample20.jpg" alt="sq-sample20" />
  <figcaption><i class="ion-android-stopwatch"></i></figcaption>
  <a href="#"></a>
</figure>

Bước 2: Thêm CSS

@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
.snip1566 {
  position: relative;
  display: inline-block;
  margin: 20px;
  max-width: 190px;
  width: 100%;
  color: #bbb;
  font-size: 16px;
  box-shadow: none !important;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1566 *,
.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.snip1566:before,
.snip1566:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 50%;
  content: '';
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: -1;
  border: 2px solid #bbb;
  border-color: transparent #bbb;
}

.snip1566 img {
  max-width: 100%;
  backface-visibility: hidden;
  vertical-align: top;
  border-radius: 50%;
  padding: 10px;
}

.snip1566 figcaption {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  right: 5px;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.9);
  border-radius: 50%;
}

.snip1566 i {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  font-size: 4em;
  z-index: 1;
}

.snip1566 a {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.snip1566:hover figcaption,
.snip1566.hover figcaption {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.snip1566:hover:before,
.snip1566.hover:before,
.snip1566:hover:after,
.snip1566.hover:after {
  border-width: 10px;
}

.snip1566:hover:before,
.snip1566.hover:before {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.snip1566:hover:after,
.snip1566.hover:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

Bước 3: Thêm jQuery

$(".hover").mouseleave(
  function () {
    $(this).removeClass("hover");
  }
);

Chuyên Mục : Chia sẻ CSS Hiệu ứng CSS Hover effect css Hover image css Hướng dẫn ionicons Thiết kế website