Membuat gambar efek hover

Berikut ini akan diuraikan langkah-langkah cara membuat ( text atau gambar efek hover ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( text atau gambar efek hover ) sebagai berikut :

KODE 1
Ceklist untuk menampilkan :
<style>
*, *:before, *:after {
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  transition:0.5s;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0}

.elem {
  width:32vw;
  display:inline-block;
  color:white;
  font-size:2em;
  position:relative;
  height:20vw;
  overflow:hidden;
  will-change:transform}

.elem:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  will-change:transform, opacity}

.elem:after {content:"";position:absolute;will-change:transform}
.elem img {width:32vw;height:20vw;will-change:transform}
.elem:hover:before {opacity:1}
.demo1:after {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.demo1:before {
  background-color:lightBlue;
  background-image:url("URL-Gambar (1).jpg");
  background-blend-mode:luminosity}

.demo1:after {
  opacity:0;
  border:.15vw solid #fff;
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5)}

.demo1:hover:after {
  opacity:1;
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95)}
</style>
<div class="elem demo1">
<img src="URL-Gambar (1).jpg" />
</div>
KODE 2
Ceklist untuk menampilkan :
<style>
*, *:before, *:after {
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  transition:0.5s;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0}

.elem {
  width:32vw;
  display:inline-block;
  color:white;
  font-size:2em;
  position:relative;
  height:20vw;
  overflow:hidden;
  will-change:transform}

.elem:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  will-change:transform, opacity}

.elem:after {content:"";position:absolute;will-change:transform}
.elem img {width:32vw;height:20vw;will-change:transform}
.elem:hover:before {opacity:1}
.demo2:before {
  background:#E85858;
  background-image:url("URL-Gambar (2).jpg");
  background-blend-mode:darken}

.partialBorder {
  -webkit-transform:scale(0.5);
  -moz-transform:scale(0.5);
  -o-transform:scale(0.5);
  transform:scale(0.5);
  opacity:0}

.partialBorder > div{position:absolute;height:10%;width:10%;border:2px solid #fff}
.partialBorder {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.partialBorder .leftTop {left:0;top:0;border-right:none;border-bottom:none}
.partialBorder .rightTop {right:0;top:0;border-left:none;border-bottom:none}
.partialBorder .leftBot {left:0;bottom:0;border-right:none;border-top:none}
.partialBorder .rightBot {right:0;bottom:0;border-left:none;border-top:none}
.demo2:hover .partialBorder {
  opacity:1;
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95)}
</style>
<div class="elem demo2">
    <img src="URL-Gambar (2).jpg" />
      <div class="partialBorder">
        <div class="leftTop"></div>
        <div class="rightTop"></div>
        <div class="leftBot"></div>
        <div class="rightBot"></div>
      </div>
</div>
KODE 3
Ceklist untuk menampilkan :
<style>
*, *:before, *:after {
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  transition:0.5s;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0}

.elem {
  width:32vw;
  display:inline-block;
  color:white;
  font-size:2em;
  position:relative;
  height:20vw;
  overflow:hidden;
  will-change:transform}

.elem:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  will-change:transform, opacity}

.elem:after {content:"";position:absolute;will-change:transform}
.elem img {width:32vw;height:20vw;will-change:transform}
.elem:hover:before {opacity:1}
.demo3:before {
  background:#34C7A5;
  background-image:url("URL-Gambar (3).jpg");
  background-blend-mode:exclusion;
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -o-transform:scale(1.3);
  transform:scale(1.3)}

.demo3 img {
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -o-transform:scale(1.3);
  transform:scale(1.3)}

.demo3:hover img, .demo3:hover:before {
  -webkit-transform:scale(1);
  -moz-transform:scale(1);
  -o-transform:scale(1);
  transform:scale(1)}

.demo3 .line {
  position:absolute;
  top:50%;
  left:5%;
  width:90%;
  height:.1vw;
  background:#fff;
  z-index:500;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  transform-origin:50% 50%}

.demo3:hover .line.topToBot {
  -webkit-transform:rotate(32deg);
  -moz-transform:rotate(32deg);
  -ms-transform:rotate(32deg);
  -o-transform:rotate(32deg);
  transform:rotate(32deg)}

.demo3:hover .line.botToTop {
  -webkit-transform:rotate(-32deg);
  -moz-transform:rotate(-32deg);
  -ms-transform:rotate(-32deg);
  -o-transform:rotate(-32deg);
  transform:rotate(-32deg)}
</style>
<div class="elem demo3">
  <img src="URL-Gambar (3).jpg" />
    <div class="line topToBot"></div>
    <div class="line botToTop"></div>
</div>
KODE 4
Ceklist untuk menampilkan :
<style>
*, *:before, *:after {
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  transition:0.5s;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  margin:0}

.elem {
  width:32vw;
  display:inline-block;
  color:white;
  font-size:2em;
  position:relative;
  height:20vw;
  overflow:hidden;
  will-change:transform}

.elem:before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
  background-size:100% 100%;
  background-repeat:no-repeat;
  will-change:transform, opacity}

.elem:after {content:"";position:absolute;will-change:transform}
.elem img {width:32vw;height:20vw;will-change:transform}
.elem:hover:before {opacity:1}
.demo4 .lineCont {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.demo4:before {
  background:#A7BA38;
  background-image:url("URL-Gambar (4).jpg");
  background-blend-mode:luminosity;
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -o-transform:scale(1.3);
  transform:scale(1.3)}

.demo4 img {
  -webkit-transform:scale(1.3);
  -moz-transform:scale(1.3);
  -o-transform:scale(1.3);
  transform:scale(1.3)}

.demo4:hover img, .demo4:hover:before {
  -webkit-transform:scale(1.3) translateX(50px);
  -moz-transform:scale(1.3) translateX(50px);
  -ms-transform:scale(1.3) translateX(50px);
  -o-transform:scale(1.3) translateX(50px);
  transform:scale(1.3) translateX(50px)}

.demo4 .lineCont {
  overflow:hidden;
  -webkit-transform:scale(0.95);
  -moz-transform:scale(0.95);
  -o-transform:scale(0.95);
  transform:scale(0.95)}

.demo4 .line {
  position:absolute;
  top:50%;
  left:0;
  width:100%;
  height:2px;
  background:#fff;
  -webkit-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  transform-origin:0 0;
  will-change:transform}

.demo4:hover .line.top {top:0}
.fourth .line.right {
  -webkit-transition-delay:0.1s;
  -moz-transition-delay:0.1s;
  -o-transition-delay:0.1s;
  transition-delay:0.1s}

.demo4:hover .line.right {
  left:100%;
  top:0;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  width:62.5%}

.demo4 .line.bottom {
  -webkit-transition-delay:0.2s;
  -moz-transition-delay:0.2s;
  -o-transition-delay:0.2s;
  transition-delay:0.2s}

.demo4:hover .line.bottom {
  top:-webkit-calc(100% - .1vw);
  top:-moz-calc(100% - .1vw);
  top:calc(100% - .1vw)}

.demo4 .line.left {
  -webkit-transition-delay:0.3s;
  -moz-transition-delay:0.3s;
  -o-transition-delay:0.3s;
  transition-delay:0.3s}

.demo4:hover .line.left {
  left:0;
  top:100%;
  -webkit-transform:rotate(-90deg);
  -moz-transform:rotate(-90deg);
  -ms-transform:rotate(-90deg);
  -o-transform:rotate(-90deg);
  transform:rotate(-90deg);
  width:62.5%}
</style>
<div class="elem demo4">
  <img src="URL-Gambar (4).jpg" />
     <div class="lineCont">
       <div class="line top"></div>
       <div class="line right"></div>
       <div class="line bottom"></div>
       <div class="line left"></div>
     </div>
</div>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( text atau gambar efek hover ) semoga bermanfaat terima kasih.

Tidak ada komentar

Posting Komentar

Langganan: Posting Komentar (Atom)