Background Hover Concept

• Home
• DEMO 1
• DEMO 2
• DEMO 3
• DEMO 4
• DEMO 5
• DEMO 6
• DEMO 7
• DEMO 8
• DEMO 9
• Devy Indriyani

Hover Border Inset

<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>

Hasilnya ⇓

Well Come To My Blog

Halaman ini saya beri nama "DEMO SHOW" Tutorial, halaman statis hanya untuk menampilkan hasil karya-karya saya saat membuat beberapa tampilan efek dalam blog, yang hasilnya akan saya muat disini dan saya tampilkan hanya buat Anda semua pecinta Sahabat Blogger 77 (SB-77 Design).

Pada halaman Sebelah kiri sudah saya berikan 9 item model background dengan efek HOVER, Anda tinggal pilih tampilan mana yang unik dan menarik buat Anda terapkan di blog Anda. SELAMAT MENIKMATI..

Partial Border Position

<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>

Hasilnya ⇓

Sepia Background Line

<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>

Hasilnya ⇓

Background Line Waiting Delay

<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>

Hasilnya ⇓

Centered Text Transition Hover

<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}
.demo5:after {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.demo5:before {
  background:#C85ED6;
  background-image:url("URL-Gambar (5).jpg");
  background-blend-mode:difference}

.demo5:before, .demo5 img {
  -webkit-transform:scale(1.2);
  -moz-transform:scale(1.2);
  -o-transform:scale(1.2);
  transform:scale(1.2)}

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

.demo5:after {
  border:5px solid #fff;
  height:50%;
  -webkit-transform:scale(0.9);
  -moz-transform:scale(0.9);
  -o-transform:scale(0.9);
  transform:scale(0.9)}

.demo5:hover:after {top:20%}
.demo5 .left,.demo5 .right {position:absolute;font-size:2vw;z-index:100}
.demo5 .left {left:13%;top:10%}

.demo5:hover .left {top:54%}
.demo5 .right {left:40%;top:110%}
.demo5:hover .right {top:54%}
</style>
<div class="elem demo5">
   <img src="URL-Gambar (5).jpg" />
     <span class="left">Tulis</span>
     <span class="right">Teks Anda..!!</span>
</div>

Hasilnya ⇓

Tulis >>
Text Anda Disini!

HOVER : Revealing Text Effect

<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}
.demo6 .rv {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.demo6:before {
  background:#5067E6;
  background-image:url("URL-Gambar (6).jpg");
  background-blend-mode:hard-light}

.demo6 .rv {height:30%;max-width:0%;top:70%;overflow:hidden}
.demo6 .rv span{position:absolute;font-size:2vw;top:0;left:2.4vw;white-space:nowrap}
.demo6:hover .rv {max-width:50%}
</style>
<div class="elem demo6">
   <img src="URL-Gambar (6).jpg" />
     <div class="rv">
      <span>Tulis Text Anda Disini...</span>
     </div>
</div>

Hasilnya ⇓

SB-77 Design

Fade In Text Rotate

<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}
.demo7:before {
  background:#282913;
  background-image url("URL-Gambar (7).jpg");
  background-blend-mode:color-dodge}

.demo7 .text {
  position:absolute;
  display:block;
  opacity:0;
  left:65%;
  top:15%;
  font-size:2vw;
  color:#000;
  z-index:100;
  -webkit-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  transform-origin:0 0;
  -webkit-transform:scale(0.7) rotate(30deg);
  -moz-transform:scale(0.7) rotate(30deg);
  -ms-transform:scale(0.7) rotate(30deg);
  -o-transform:scale(0.7) rotate(30deg);
  transform:scale(0.7) rotate(30deg)}

.demo7:hover .text {
  opacity:1;
  -webkit-transform:scale(1) rotate(30deg);
  -moz-transform:scale(1) rotate(30deg);
  -ms-transform:scale(1) rotate(30deg);
  -o-transform:scale(1) rotate(30deg);
  transform:scale(1) rotate(30deg)}
</style>
<div class="elem demo7">
   <img src="URL-Gambar (7).jpg" />
     <span class="text">Tulis Teks Anda Disini..!!</span>
</div>

Hasilnya ⇓

Design By.
Devy Indriyani

Vertical Revealing Text

<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}
.bgd {margin:0 auto;text-align:center}
.demo8:hover .rv {max-height:100%}
.demo8 .rv {position:absolute;top:0;left:0;width:100%;height:100%;z-index:60}
.demo8:before {
  background:#5067E6;
  background-image:url("URL-Gambar (8).jpg");
  background-blend-mode:hard-light}

.demo8 .rv {left:80%;width:23%;max-height:0%;overflow:hidden}
.demo8 .rv span {
  position:absolute;
  font-size:25px;
  top:10%;
  white-space:nowrap;
  padding:5px;
  border:2px solid #fff;
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
  -o-transform:rotate(90deg);
  transform:rotate(90deg);
  -webkit-transform-origin:0 0;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -ms-transform-origin:0 0;
  transform-origin:0 0}
</style>
<div class="bgd">
   <div class="elem demo8">
      <img src="URL-Gambar (8).jpg" />
    <div class="rv">
        <span>Tulis Teks Anda Disini...</span>
    </div>
   </div>
</div>

Hasilnya ⇓

Sahabat Blogger 77

Rotate Text And Image Hover

<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}
.demo9:before {
  background:#B35977;
  background-image:url("URL-Gambar (9).jpg");
  background-blend-mode:soft-light;
  -webkit-transform-origin:50% 50%;
  -moz-transform-origin:50% 50%;
  -o-transform-origin:50% 50%;
  -ms-transform-origin:50% 50%;
  transform-origin:50% 50%;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg)}

.demo9 .rotText {
  position:absolute;
  display:block;
  opacity:0;
  left:40%;
  top:75%;
  font-size:2vw;
  color:#fff;
  z-index:100;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  -ms-transform:rotate(180deg);
  -o-transform:rotate(180deg);
  transform:rotate(180deg)}

.demo9:hover .rotText {
  opacity:1;
  -webkit-transform:rotate(0deg);
  -moz-transform:rotate(0deg);
  -ms-transform:rotate(0deg);
  -o-transform:rotate(0deg);
  transform:rotate(0deg)}
</style>
<div class="elem demo9">
   <img src="URL-Gambar (9).jpg" />
    <span class="rotText">Tulis Teks Anda Disini...</span>
</div>

Hasilnya ⇓

SB-77 Web Design