'Stretching a grid box on hover to display additional information in that box

I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.

Below is what I did and how the app looks like.

In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.

I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!

const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");

console.log(displayContent)

addWidget.addEventListener('click', newWidget);
var cont=0;

function newWidget(){
    cont=cont+1;
    let newWidget = document.createElement('div');
    newWidget.setAttribute('class', 'widget');
    newWidget.setAttribute('id', "widget" + cont);
    
    let closeBtn = document.createElement('span');
    closeBtn.setAttribute('class', 'remove');
    closeBtn.setAttribute('id', 'remove' +cont);
    closeBtn.textContent = '✕';

    displayContent.appendChild(newWidget);
    newWidget.appendChild(closeBtn);

    //remove the cards
    var close = document.querySelectorAll("span");
    for(let i=0 ; i<close.length; i++){
        close[i].addEventListener('click', () =>{
            close[i].parentElement.remove();
        })
    }

    
}
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

:root {
    --fontcolor: #313131;
    --bgcolor: #FAFAFA; 
}   
html {
    font-family: "Roboto", sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bgcolor);
    margin: 0;
    color: var(--fontcolor);
    transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
  max-width: 85vw;
  margin: 0 auto;
}

header {
    display: flex;
    margin-bottom: 30px;
    font-size: 1.5em;
    align-items: center;
    justify-content: space-between;
}

.search {
    width: 100%;
    position: relative;
    display: flex;
  }
  
  .searchTerm {
    width: 100%;
    border: 3px solid black;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
  }
  
  .addButton {
    width: 40px;
    height: 36px;
    border: 1px solid black;
    background: black;
    text-align: center;
    color: #fff;
    border-radius: 0 6px 5px 0;
    cursor: pointer;
    font-size: 20px;
  }
  
  .content {
    margin-bottom: 1em;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: minmax(250px, 1fr);
    grid-gap: 25px;
}

.widget {
    color: white;
    display: flex;
    flex-direction: column;
    padding: 25px;
    position: relative;
    white-space: normal;
    word-wrap: break-word;
    transition: background-color 50ms;
    background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
    box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
    border-radius: 5px;
}
.remove{
    position: absolute;
    top: 5px;
    right: 12px;
    font-size: 22px;
    opacity: 0.7;
    cursor: pointer;
}

  @keyframes append-animate {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(0%);
        opacity: 1;
    }
}

/* animate new box */
.widget {
    animation: append-animate .3s linear;
}
<!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>My Library</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
    <div class="container">
        <header class="header">
            <h1 id='title'>Weather App</h1>
            <div class="control">
                <div class="wrap">
                    <div class="search">
                       <input type="text" class="searchTerm" placeholder="Add a city">
                       <button type="submit" class="addButton">+</button>
                    </div>
                 </div>
            </div>
        </header>

        <div class="content">
            <div class="widget" id="widget0">
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>
javascripthtmlcss


Solution 1:[1]

Have you tried using CSS transitions?

div {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: 10px;
  transition: all 1s;
}

div.h:hover {
  width: 150px;
  background-color: purple;
}

div.v:hover {
  height: 150px;
  background-color: purple;
}
<div class="h"></div>

<div class="v"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 fnostro

Related Questions