Tampilkan postingan dengan label Hover. Tampilkan semua postingan
Tampilkan postingan dengan label Hover. Tampilkan semua postingan

Tooltip Gambar



Color Clock







Hover Profile Card



Devy Indriyani



- SB-77 Web Designer -

Hello there!

Gallery Zoom Effect With Hover


Menu Hover CSS3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.




Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent euismod ultrices ante, ac laoreet nulla vestibulum adipiscing. Nam quis justo in augue auctor imperdiet. Curabitur aliquet orci sit amet est posuere consectetur. Fusce nec leo ut massa viverra venenatis. Nam accumsan libero a elit aliquet quis ullamcorper arcu tincidunt. Praesent purus turpis, consectetur quis congue vel, pulvinar at lorem. Vivamus varius condimentum dolor, quis ultricies ipsum porta quis.

Social Buttons With CSS Hover


Remember to add prefixes. In this demo, I use "prefixfree.js" which makes the job for me.

Background Hover Concept




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

Menu Hover Item SlideShow


Stylish Hover Effect For Text


SB-77

SB-77

SB-77

SB-77

SB-77

SB-77

SB-77

SB-77

SB-77