Expanding Selections on hover using HTML and CSS

Welcome aboard Coding Torque, your ultimate destination for unlocking the secrets of web development wizardry! Prepare to be enthralled as we embark on an extraordinary journey, where ordinary web elements transform into dynamic and engaging features. Today’s mission: crafting awe-inspiring Expanding Selections on hover using the dynamic duo of HTML and CSS. Brace yourself for an interactive experience like no other, as we dive deep into the art of hover effects, animating your selections into captivating displays of creativity. Whether you’re a seasoned coder eager to add flair to your projects or a curious newcomer hungry to learn the magic of web design, this tutorial is tailor-made for you. So, let your imagination run wild and let’s unleash the full potential of HTML and CSS to create a digital spectacle that leaves visitors in awe! Ready to elevate your web presence? Let’s begin this thrilling journey of expansion and discovery!

Before we start here are 50 projects to create using HTML CSS and JavaScript –

50 HTML CSS and JavaScript Projects you should create

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

Demo

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Expanding Selections on hover using HTML and CSS - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="container">
    <div id="marketing" class="section">
      <div class="content">
        <h1>Marketing</h1>
      </div>
      <div class="overlay"></div>
    </div>
    <div id="technology" class="section">
      <div class="content">
        <h1>Technology</h1>
      </div>
      <div class="overlay"></div>
    </div>
    <div id="advertising" class="section">
      <div class="content">
        <h1>Advertising</h1>
      </div>
      <div class="overlay"></div>
    </div>
</div>

CSS Code

Create a file style.css and paste the code below.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

.container {
  display: flex;
  height: 100vh;
}

.section {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  color: #fff;
  transition: flex .4s ease;
  position: relative;
}

.section .overlay {
  background-color: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100%;
  position: absolute;
  transition: background-color .8s ease;
}

.section .content {
  z-index: 2;
}

.section:hover {
  flex: 2;
}

.section:hover .overlay {
  background-color: rgba(0, 0, 0, 0.95);
}

#marketing {
  background-image: url(https://images.unsplash.com/photo-1522205987242-8e22924ab42a?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=c0f679eb8f15705d46ea90008f39642b&auto=format&fit=crop&w=500&q=60);
}


#technology {
  background-image: url(https://images.unsplash.com/photo-1530893609608-32a9af3aa95c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fe6b92f88f55824e64a1bae15f5bf52a&auto=format&fit=crop&w=500&q=60);
}

#advertising {
  background-image: url(https://images.unsplash.com/photo-1517799094725-e3453440724e?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=353f3663a9fae75773d2942aeb37c2c8&auto=format&fit=crop&w=500&q=60);
}

Final Output

Expanding Selections on hover using HTML and CSS

Written by: Piyush Patil

Code Credits: codebubb

If you found any mistakes or have any doubts please feel free to Contact Us

Hope you find this post helpful💖