how to zoom background and animate underline on hover using CSS3 Javascript?

zoom

In this article, we will learn how to zoom in the background and animate text underline at the same time on hover using CSS and javascript, I have learned this from practicing and from multiple websites I hope you would be able to get all the information from this article now let’s start with some prerequisites of this article,

NOTE: if you are looking just for the code then copiable code is given at the end of the article,

prerequisite articles :

  1. learn to zoom image on hover,
  2. learn to animate underline on hover

Table of contents :

Now let’s start with the HTML markup,

HTML :

<div class="container">
  <div class="box box1"></div>
  <div class="container-child">
    <div class="box box2"></div>
    <div class="box box3"></div>
  </div>
</div>

we are gonna need 3 boxes, so let’s start with making a div with a class container that will hold the all the boxes, it has 2 parts in which its first part has one box and the other part will again be divided into 2 sub boxes that’s how we will get 3 boxes,

now as we can see that our whole box works as a link so if you hover on it both the transition occurs at the same time for that reason all the boxes will have one anchor tag in which all the tags will be placed,

<a href="#">
  <div class="img-container img-container1"></div>
  <div class="text-area text-area1">
    <div class="text-head text-head1">
    </div>
    <div class="text-discription">
    </div>
</div>
</a>

in the anchor tag, there will be two divs in which the first one will hold the image and the second will hold the text, In the text div, we will have one heading tag and one p tag the format for 3 boxes would be the same but some of the class names would be different the reason of that we will see in CSS,

do not copy from the codepen because it’s been adjusted for the smaller size so the text would be much smaller use the code given at the end of a blog,

CSS :

let’s start with reseting our CSS and decreasing our HTML font size and adding some font family to our HTML,

     .container {
        display: flex;
        flex-direction: row;
        width: 80%;
        height: 80vh;
        margin: auto;
        margin-top: 7rem;
      }

now provide some width & height to our container with margin auto on sides and margin-top to put it in the center, change the display property to flex with flex-direction of a row,

      .box1 {
        width: 50%;
      }

      .container_child {
        width: 50%;
        display: flex;
        flex-direction: column;
      }
      .box2 {
        height: 50%;
      }
      .box3 {
        height: 50%;
      }

as we have discussed before we are going to need 3 boxes in which the first half of the container will hold one box and the other will hold two boxes, so now let’s divide the width into half for both the box of the container and now our 1st half has got its one box, to add two boxes in 2nd half we will again use flexbox in which the height will be divided to 50% with flex-direction of a column,

      .box {
        margin: 1rem;
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: 0.8rem 0.8rem 0.8rem rgba(0, 0, 0, 0.647);
        transition: box-shadow 2s;
      }

      .box:hover {
        box-shadow: 1.2rem 1.2rem 0.8rem rgba(0, 0, 0, 0.497);
        transition: box-shadow 1s;
      }

all the three boxes will have a common class named box, in which we will apply margin, border-radius, overflow-hidden, and box-shadow with the transition of box-shadow,
after that, we will add one hover effect to the box which will increase the box-shadow with some transition,

now let’s add some images and text to the boxes with some transition now if you have read my blogs you will know how to zoom an image and animate text underline if not then check that out and now we will move to the next part,

        .hover {
          transform: scale(1.2);
          transition: all 2s;
        }
        .active {
        background-size: 100% 2px;
        transition: background-size 1s;
        }

what we want is to add both the transition at the same time we will create two different classes one for the transition of text underline and another one for the transition of image these two classes will be added when we hover on the box and will be removed as we hover out of the box to do that we are going to use javascript so let’s write some code in js,

javascript :

      const link = document.querySelectorAll(".box a");
      link.forEach((input) => {
        input.addEventListener("mouseover", addtheclass);
        input.addEventListener("mouseout", addtheclass);
      });

we will start with creating a variable that stores all the anchor tags, now iterate through each anchor tag using a forEach loop in which there is one function that has two event listeners, it fires whenever there is a mouseover or mouseout event occurs and calls one function,

      function addtheclass(input) {
        const img = this.querySelector(".img-container");
        img.classList.toggle("hover");
        console.log(img);
        const line = this.querySelector(".text-head");
        line.classList.toggle("active");
        console.log(line);
      }

In the mouseover event, we will add both the transitions to the image and text using the toggle class list,

In the mouseout event, we will remove both the transition from the image and text using the toggle class list. now, this is the end of the article, copiable code is given below I hope you liked it and got the information you wanted to keep reading my articles, thank you.

<!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" />
    <title>challenge</title>
    <style>
      @import url("https://fonts.googleapis.com/css2?family=Bellota+Text:[email protected];400;700&family=Bree+Serif&family=Monoton&display=swap");
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      html {
        font-size: 62.5%;
        font-family: "Bree Serif", serif;
      }

      .container {
        display: flex;
        flex-direction: row;
        width: 80%;
        height: 80vh;
        margin: auto;
        margin-top: 7rem;
      }
      .box {
        margin: 1rem;
        border-radius: 2rem;
        overflow: hidden;
        box-shadow: 0.8rem 0.8rem 0.8rem rgba(0, 0, 0, 0.647);
        transition: box-shadow 2s;
      }

      .box:hover {
        box-shadow: 1.2rem 1.2rem 0.8rem rgba(0, 0, 0, 0.497);
        transition: box-shadow 1s;
      }
        .box1 {
            width: 50%;
        }

        .container_child {
            width: 50%;
            display: flex;
            flex-direction: column;
        }
        .box2 {
            height: 50%;
        }
        .box3 {
            height: 50%;
        }

      .box a {
        position: relative;
      }

      .img-container {
        height: 100%;
        width: 100%;
        position: relative;
        opacity: 0.9;
        transition: all 1.2s;
      }

      .img-container1 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .img-container2 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }
      .img-container3 {
        background: linear-gradient(
            180deg,
            rgba(6, 6, 6, 0.292),
            rgba(0, 0, 0, 0.474)
          ),
          url(https://source.unsplash.com/random);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
      }

      .text-head {
          display: inline;
          background-image: linear-gradient(white, white);
          background-repeat: no-repeat;
          background-size: 0% 2px;
          background-position: bottom left;
          transition: background-size 400ms;
          z-index: 10;
        }
        
        .text-head1 {
            font-size: 3.5rem;
            font-weight: 500;
        }
        .text-head2 {
            font-size: 3rem;
            font-weight: 500;
        }
        
        .hover {
          transform: scale(1.2);
          transition: all 2s;
        }
        .active {
        background-size: 100% 2px;
        transition: background-size 1s;
        }
      .text-area {
        position: absolute;
        bottom: 20%;
        padding: 0 1.5rem;
        color: white;
      }
      .text-discription {
        font-size: 1.5rem;
        font-weight: 400;
        margin-top: 0.5rem;
      }
      .text-discription2 {
        font-size: 1.2rem;
        font-weight: 400;
        margin-top: 0.5rem;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1 box">
        <a href="https://google.com">
          <div class="img-container img-container1"></div>
          <div class="text-area1 text-area">
            <h1 class="text-head text-head1">
              Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
            </h1>
            <p class="text-discription">
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aliquid
              nam tempora facilis perspiciatis hic quo recusandae ex aliquam
              autem excepturi!
            </p>
          </div>
        </a>
      </div>
      <div class="container_child">
        <div class="box2 box">
          <a href="https://instagram.com">
            <div class="img-container img-container2"></div>
            <div class="text-area2 text-area">
              <h1 class="text-head text-head2">
                Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
              </h1>
              <p class="text-discription2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Aliquid nam tempora facilis perspiciatis hic quo recusandae ex
                aliquam autem excepturi!
              </p>
            </div>
          </a>
        </div>
        <div class="box3 box">
          <a href="https://linkedin.com">
            <div class="img-container img-container3"></div>
            <div class="text-area3 text-area">
              <h1 class="text-head2 text-head">
                Lorem ipsum, dolor sit amet consec adipisicing elit. Recusandae.
              </h1>
              <p class="text-discription2">
                Lorem ipsum, dolor sit amet consectetur adipisicing elit.
                Aliquid nam tempora facilis perspiciatis hic quo recusandae ex
                aliquam autem excepturi!
              </p>
            </div>
          </a>
        </div>
      </div>
    </div>
    <script>

      const link = document.querySelectorAll(".box a");
      link.forEach((input) => {
        input.addEventListener("mouseover", addtheclass);
        input.addEventListener("mouseout", removeclass);
      });

      function addtheclass(input) {
        const img = this.querySelector(".img-container");
        img.classList.add("hover");
        console.log(img);
        const line = this.querySelector(".text-head");
        line.classList.add("active");
        console.log(line);
      }
      function removeclass(input) {
        const img = this.querySelector(".img-container");
        img.classList.remove("hover");
        console.log(img);
        const line = this.querySelector(".text-head");
        line.classList.remove("active");
        console.log(line);
      }
    </script>
  </body>
</html>

7 thoughts on “how to zoom background and animate underline on hover using CSS3 Javascript?”

  1. You actually make it seem so easy with your presentation but I find
    this topic to be really something which I think I
    would never understand. It seems too complicated and extremely broad for me.
    I am looking forward for your next post, I’ll try to get the hang of it!

  2. Hi there, I discovered your site by way of Google even as searching for a
    comparable subject, your site came up, it looks great.

    I have bookmarked it in my google bookmarks.

    Hello there, just changed into alert to your weblog via Google, and located that it is truly informative.
    I am going to be careful for brussels. I’ll appreciate if
    you happen to proceed this in future. Numerous other
    folks will probably be benefited from your writing. Cheers!

  3. Woah! I’m really loving the template/theme of this website.
    It’s simple, yet effective. A lot of times it’s challenging
    to get that “perfect balance” between usability and visual appearance.
    I must say that you’ve done a great job with
    this. Also, the blog loads super fast for me on Opera.
    Outstanding Blog!

  4. Hello this is kind of of off topic but I was wanting to know if blogs use
    WYSIWYG editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding knowledge so I wanted to get advice from someone with experience.
    Any help would be enormously appreciated!

Leave a Comment

Your email address will not be published.

Scroll to Top