CSS Image Gradient Hover Effect

Hello Friends, today in this blog you’ll learn how to make CSS Image gradient hover effect.

Using some basic CSS properties you can easily create this amazing image gradient effect & it looks attractive in your website. It is a good practice to create such type of amazing effects and it’s very very simple.

Video Tutorial of CSS Image Gradient Hover Effect

https://youtu.be/i_SLdwfdIlY

In the video you’ve seen that we’ve easily created this amazing gradient hover effect. Using a mix-blend-mode property you can put text on the top of image and add a gradient background and using z-index property you can change the position. After that adding a hover effect and change the position of the gradient background. You can add such type of gradient using linear-gradient property. So it’s very simple to create this type of amazing image hover effects.

So, enjoy the tutorial & learn something new today 🙂

CSS Image Gradient Hover Effect [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>CSS Image Gradient Hover Effect</title>
</head>
<body>
     <div class="container">
         <div class="image"></div>
         <h2 class="text">Image Gradient Effect</h2>
     </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body {
     margin: 0;
     padding: 0;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 100vh;
     font-family: 'Segoe UI', sans-serif;
 }
 .container {
     background: #000;
     background: linear-gradient(135deg, #000 0%, #000 25%, #225eb3 50%, #ff30d2 75%, #600585 100%);
     background-size: 400% 400%;
     background-repeat: no-repeat;
     display: flex;
     width: 500px;
     height: 500px;
     max-width: 100vw;
     max-height: 100vh;
     justify-content: center;
     align-items: center;
     color: #fff;
     position: relative;
     cursor: pointer;
     transition: 0.5s all;
 }
 .image {
     position: absolute;
     left: 0;
     top: 0;
     background: #000 url(image.jpg) no-repeat center center;
     background-size: cover;
     z-index: 1;
     width: 100%;
     height: 100%;
     opacity: 0.5;
     mix-blend-mode: screen;
 }
 .container:hover {
     background-position: 100% 100%;
 }
 .text {
     position: relative;
     z-index: 10;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

DOWNLOAD SOURCE CODE FILES

Author
Recent Posts

codingmaster

CSS Image Gradient Hover Effect

Published by codingmaster on August 28, 2021August 28, 2021

0 Comments

Leave a Reply Cancel reply