E-Learning
Flex Grow: Hover Effects
Flex Grow Hover Effect
1
2
3
4
				
					<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex Grow Hover Effect</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item1">Item 2</div>
    <div class="item">Item 3</div>
    <div class="item1">Item 4</div>
  </div>
</body>
</html>
				
			
				
					<style>
  body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;  }

.container {
  display: flex;  }

.item {
  flex: 3;
  padding: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  transition: flex-grow 0.3s ease;
  background: white;
    font-size: 20px;  }

.item1 {
  flex: 3;
  padding: 50px;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  text-align: center;
  transition: flex-grow 0.3s ease;
  background: skyblue;
  font-size: 20px;
}
.item:hover {
  flex-grow: 9; /* Increase the flex grow value on hover */
}
.item1:hover {
  flex-grow: 9; /* Increase the flex grow value on hover */ }

</style>