Membuat Hover Effect Gambar Dengan Banyak Cara

Halo guys kali ini saya akan membagi ilmu sedikit, yaitu membuat hover effect gambar, yuk disimak.

Nah, penasaran kan bagaimana kodenya ? Yuk simak !

Pengertian

Hover merupakan gerakan atau perubahan yang terjadi pada sebuah objek apabila area objek tersebut dilintasi atau disentuh oleh mouse (panah mouse). Sedangkan konsep untuk membuat model gerakan dapat kita bentuk dengan CSS transisi dan animasi, sehingga saat cursor menyentuh area dimana objek tersebut berada, maka gerakan akan tercipta sesuai dengan konsep CSS yang sudah kita susun dan tentukan nilainya pada masing-masing deklarasi elemen hover.

Latar Belakang

Dengan menerapkan hover, dapat mempercantik tampilan dan effek suatu objek.

Kegiatan

 Ada banyak effek dalam hover gambar, ini adalah beberapa effek nya.

 1. Effek 1. Demo Disini

<style

.hovereffect {
  width: 40%;
  height: 40%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.6);
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-transform: translate(460px, -100px) rotate(180deg);
  -ms-transform: translate(460px, -100px) rotate(180deg);
  transform: translate(460px, -100px) rotate(180deg);
  -webkit-transition: all 0.2s 0.4s ease-in-out;
  transition: all 0.2s 0.4s ease-in-out;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.hovereffect h2 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  text-transform: uppercase;
  color: #fff;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
  -webkit-transform: translateY(-200px);
  -ms-transform: translateY(-200px);
  transform: translateY(-200px);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect:hover .overlay {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
  -webkit-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate(0px, 0px);
}

.hovereffect:hover h2 {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}

.hovereffect:hover a.info {
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

</style>


    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x200" alt="">
        <div class="overlay">
            <h2>Hover effect 2</h2>
            <a class="info" href="#">link here</a>
        </div>
    </div>


 

2. Effek 2. Demo Disini

<style>

.hovereffect {
  width: 100%;
  height: 100%;
  float: left;
  overflow: hidden;
  position: relative;
  text-align: center;
  cursor: default;
}

.hovereffect .overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
}

.hovereffect img {
  display: block;
  position: relative;
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
}

.hovereffect:hover img {
  filter: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feColorMatrix type="matrix" color-interpolation-filters="sRGB" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" /><feGaussianBlur stdDeviation="3" /></filter></svg>#filter');
  filter: grayscale(1) blur(3px);
  -webkit-filter: grayscale(1) blur(3px);
  -webkit-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
}

.hovereffect h2 {
  text-transform: uppercase;
  text-align: center;
  position: relative;
  font-size: 17px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.6);
}

.hovereffect a.info {
  display: inline-block;
  text-decoration: none;
  padding: 7px 14px;
  border: 1px solid #fff;
  margin: 50px 0 0 0;
  background-color: transparent;
}

.hovereffect a.info:hover {
  box-shadow: 0 0 5px #fff;
}

.hovereffect a.info, .hovereffect h2 {
  -webkit-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  -webkit-transition: all 0.4s ease-in;
  transition: all 0.4s ease-in;
  opacity: 0;
  filter: alpha(opacity=0);
  color: #fff;
  text-transform: uppercase;
}

.hovereffect:hover a.info, .hovereffect:hover h2 {
  opacity: 1;
  filter: alpha(opacity=100);
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

</style>

    <div class="hovereffect">
        <img class="img-responsive" src="http://placehold.it/350x200" alt="">
        <div class="overlay">
           <h2>Hover effect 3</h2>
           <a class="info" href="#">link here</a>
        </div>
    </div>


 

3. Effek 3. Demo Disini

<div class="hovereffect">

        <img class="img-responsive" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6f6gPrtBIDFOInF-KvJJH6eR4U3xNM8SlSdGsC9euvQusnXCYxWnSxT_GMnSc5XQ8_exMOgGhM2bNt62UX0393nOI_FDqqomtxK3OX0TnvFbtc1CgxW3dysBsNAchNuVEwrFPikSoq2Q/s1600/IMG_7311.JPG" alt="">

        <div class="overlay">

           <h2>Hover effect 4</h2>

           <a class="info" href="#">link here</a>

        </div>

    </div>

<style>

.hovereffect {

  width: 40%;

  height: 40%;

  float: left;

  overflow: hidden;

  position: relative;

  text-align: center;

  cursor: default;

}


.hovereffect .overlay {

  width: 100%;

  height: 100%;

  position: absolute;

  overflow: hidden;

  top: 0;

  left: 0;

  background-color: rgba(75,75,75,0.7);

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}


.hovereffect:hover .overlay {

  background-color: rgba(48, 152, 157, 0.4);

}


.hovereffect img {

  display: block;

  position: relative;

}


.hovereffect h2 {

  text-transform: uppercase;

  color: #fff;

  text-align: center;

  position: relative;

  font-size: 17px;

  padding: 10px;

  background: rgba(0, 0, 0, 0.6);

  -webkit-transform: translateY(45px);

  -ms-transform: translateY(45px);

  transform: translateY(45px);

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

}


.hovereffect:hover h2 {

  -webkit-transform: translateY(5px);

  -ms-transform: translateY(5px);

  transform: translateY(5px);

}


.hovereffect a.info {

  display: inline-block;

  text-decoration: none;

  padding: 7px 14px;

  text-transform: uppercase;

  color: #fff;

  border: 1px solid #fff;

  background-color: transparent;

  opacity: 0;

  filter: alpha(opacity=0);

  -webkit-transform: scale(0);

  -ms-transform: scale(0);

  transform: scale(0);

  -webkit-transition: all 0.4s ease-in-out;

  transition: all 0.4s ease-in-out;

  font-weight: normal;

  margin: -52px 0 0 0;

  padding: 62px 100px;

}


.hovereffect:hover a.info {

  opacity: 1;

  filter: alpha(opacity=100);

  -webkit-transform: scale(1);

  -ms-transform: scale(1);

  transform: scale(1);

}


.hovereffect a.info:hover {

  box-shadow: 0 0 5px #fff;

}

</style>

Referensi
- https://miketricking.github.io/dist/

Sekian postingan kali ini semoga bermanfaat. goodluck.