Source Code Hexagon Image Hover Overlay dengan HTML CSS

Post a Comment

Source Code Hexagon Image Hover Overlay dengan CSS

Source Code Hexagon Image Hover Overlay kali ini merupakan sebuah gambar berbentuk Hexagonal yang pada saat dihover akan muncul overlay tulisan berupa keterangan dengan background gradient. Untuk selebihnya script ini bisa anda kembangkan sendiri dengan modal pengetahuan CSS3. Beberapa properti yang digunakan pada script ini adalah Transition, Clip Path, linear-gradient, dan lain sebagainya. 


Source Code Hexagon Image Hover Overlay dengan HTML CSS


KODE HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hexagon Image Hover Overlay - GreyTekno.com</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="hexagon">
            <div class="shape">
                <img src="https://sgp1.digitaloceanspaces.com/tz-mag-id/wp-content/uploads/2018/03/101003031414/1-2-PusukBuhit-By-andi_hzain.jpg"
                    alt="">
                <div class="content">
                    <h2>Beautiful Hill</h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad totam sapiente voluptas sunt
                        adipisci minima nulla non repellat illo eius.</p>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="shape">
                <img src="https://pidjar.com/wp-content/uploads/2019/09/ngedenbeach.jpg" alt="">
                <div class="content">
                    <h2>Beautiful Beach </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad totam sapiente voluptas sunt
                        adipisci minima nulla non repellat illo eius.</p>
                </div>
            </div>
        </div>
        <div class="hexagon">
            <div class="shape">
                <img src="https://cdn.idntimes.com/content-images/post/20200616/visitbogor-20200616-152409-0-1208b201945e55ee6a18f3b4af857eff_600x400.jpg"
                    alt="">
                <div class="content">
                    <h2>Beautiful Park </h2>
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ad totam sapiente voluptas sunt
                        adipisci minima nulla non repellat illo eius.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

KODE CSS 
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.container .hexagon {
  width: 400px;
  height: 400px;
  position: relative;
  margin: 50px 20px 70px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.container .hexagon:hover .shape .content {
  opacity: 1;
}

.container .hexagon:hover .shape {
  -webkit-transform: translateY(-60px);
          transform: translateY(-60px);
}

.container .hexagon:hover::before {
  opacity: 0.6;
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}

.container .hexagon::before {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  content: '';
  position: absolute;
  bottom: -70px;
  width: 100%;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(rgba(0, 0, 0, 0.15), transparent);
}

.container .hexagon .shape {
  cursor: pointer;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
          clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
  background: #000;
  transition: all 0.3s ease;
}

.container .hexagon .shape .content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  text-align: center;
  padding: 40px;
  background: linear-gradient(45deg, #007bff, rgba(95, 3, 244, 0.5));
  color: #fff;
  opacity: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.container .hexagon .shape .content h2 {
  margin-bottom: 20px;
}

.container .hexagon .shape img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

Atau jika anda menggunakan SCSS bisa gunakan kode berikut

KODE SCSS:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    flex-wrap: wrap;

    & .hexagon {
        width: 400px;
        height: 400px;
        position: relative;
        margin: 50px 20px 70px;
        transition: all 0.3s ease;

        &:hover .shape .content {
            opacity: 1;
        }

        &:hover .shape {
            transform: translateY(-60px);
        }

        &:hover::before {
            opacity: 0.6;
            transform: scale(0.7);
        }

        &::before {
            transition: all 0.3s ease;
            content: '';
            position: absolute;
            bottom: -70px;
            width: 100%;
            height: 60px;
            border-radius: 50%;
            background: radial-gradient(rgba(0, 0, 0, 0.15), transparent);
        }

        & .shape {
            cursor: pointer;
            transition: all 0.3s ease;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);
            background: #000;
            transition: all 0.3s ease;

            .content {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                flex-direction: column;
                text-align: center;
                padding: 40px;
                background: linear-gradient(45deg, #007bff, rgba(95, 3, 244, 0.5));
                color: #fff;
                opacity: 0;
                transition: all 0.3s ease;

                h2 {
                    margin-bottom: 20px;
                }
            }

            img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
    }
}

Klik tombol dibawah ini untuk melihat Demo Hasilnya

Sekian postingan Source Code Hexagon Image Hover Overlay dengan HTML CSS, semoga bermanfaat.

Related Posts

Post a Comment