Chia sẻ một hiệu ứng đẹp Hover Image - Rê chuột vào hình ảnh

views

A+A-

PrintEmail

Bài viết này LaiXe.Xyz xin tiếp tục chia sẻ một hiệu ứng khi rê chuột vào hình ảnh rất đẹp chỉ cần sử dụng CSS3 là có thể làm được. Mời các bạn cùng theo dõi nhé

Hover Image Effect Demo

Cảnh Đẹp Sa Pa

Hiệu ứng rê chuột vào hình ảnh đẹp. Image Hover Effect using Css3

Alan Fresco

The real fun of living wisely is that you get to be smug about it.

Indigo Violet

But Calvin is no kind and loving god! He's one of the old gods! He demands sacrifice!

Hướng dẫn và code nguồn

Để tạo hiệu ứng khi rê chuột vào những hình ảnh như demo ở trên. Việc đầu tiên là các bạn phải thêm HTML như mẫu sau
Mẹo: Bấm nút để copy code

<figure class="snip1543">
  <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiHAoAFou7pQri7K6fGsTm0IG9OtMnpPhyphenhyphenv4QXMBUEAquZeEvo96Ao-m6T3hINIQgdAcmBc_3X35sK831LcTa_TOuopp7JNLfpS5SHPCge4jZqeWsv4PR_RDK_Dk0hZOxTwveInlp9ALr-g/s400/anh-dep-sapa.png" alt="sapa" />
  <figcaption>
    <h3>Cảnh Đẹp Sa Pa</h3>
    <p>Hiệu ứng rê chuột vào hình ảnh đẹp. Image Hover Effect using Css3</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543 hover"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample100.jpg" alt="sample100" />
  <figcaption>
    <h3>Alan Fresco</h3>
    <p>The real fun of living wisely is that you get to be smug about it.</p>
  </figcaption>
  <a href="#"></a>
</figure>
<figure class="snip1543"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/331810/sample101.jpg" alt="sample101" />
  <figcaption>
    <h3>Indigo Violet</h3>
    <p>But Calvin is no kind and loving god! He's one of the old gods! He demands sacrifice! </p>
  </figcaption>
  <a href="#"></a>
</figure>

Bước 2: Thêm CSS

.snip1543 {
  background-color: #fff;
  color: #ffffff;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 16px;
  margin: 10px;
  max-width: 315px;
  min-width: 230px;
  overflow: hidden;
  position: relative;
  text-align: left;
  width: 100%;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.snip1543 *,
.snip1543 *:before,
.snip1543 *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543 img {
  backface-visibility: hidden;
  max-width: 100%;
  vertical-align: top;
}

.snip1543:before,
.snip1543:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: '';
  background-color: #b81212;
  opacity: 0.5;
  -webkit-transition: all 0.45s ease;
  transition: all 0.45s ease;
}

.snip1543:before {
  -webkit-transform: skew(30deg) translateX(-80%);
  transform: skew(30deg) translateX(-80%);
}

.snip1543:after {
  -webkit-transform: skew(-30deg) translateX(-70%);
  transform: skew(-30deg) translateX(-70%);
}

.snip1543 figcaption {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  z-index: 1;
  bottom: 0;
  padding: 25px 40% 25px 20px;
}

.snip1543 figcaption:before,
.snip1543 figcaption:after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #b81212;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.7);
  content: '';
  opacity: 0.5;
  z-index: -1;
}

.snip1543 figcaption:before {
  -webkit-transform: skew(30deg) translateX(-100%);
  transform: skew(30deg) translateX(-100%);
}

.snip1543 figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-90%);
  transform: skew(-30deg) translateX(-90%);
}

.snip1543 h3,
.snip1543 p {
  margin: 0;
  opacity: 0;
  letter-spacing: 1px;
}

.snip1543 h3 {
  font-family: 'Teko', sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 1em;
  text-transform: uppercase;
}

.snip1543 .des {
  font-size: 0.9em;
}

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

.snip1543:hover h3,
.snip1543.hover h3,
.snip1543:hover p,
.snip1543.hover p {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 0.9;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.snip1543:hover:before,
.snip1543.hover:before {
  -webkit-transform: skew(30deg) translateX(-20%);
  transform: skew(30deg) translateX(-20%);
  -webkit-transition-delay: 0.05s;
  transition-delay: 0.05s;
}

.snip1543:hover:after,
.snip1543.hover:after {
  -webkit-transform: skew(-30deg) translateX(-10%);
  transform: skew(-30deg) translateX(-10%);
}

.snip1543:hover figcaption:before,
.snip1543.hover figcaption:before {
  -webkit-transform: skew(30deg) translateX(-40%);
  transform: skew(30deg) translateX(-40%);
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}

.snip1543:hover figcaption:after,
.snip1543.hover figcaption:after {
  -webkit-transform: skew(-30deg) translateX(-30%);
  transform: skew(-30deg) translateX(-30%);
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

Bước 3: Thêm Jquery sau nếu bạn dùng hiệu ứng giống ví dụ ở tấm ảnh thứ 2

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

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

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