javascripthtmlcssscale

Scale on CSS images flowing to bottom instead of getting bigger

I'm currently working on a project named "WhatsWorthMore?", I tried adding an animation which on :hover makes the item bigger, But instead of making it bigger.. It flows toward the bottom right of the page.

Here is the main part of the code, I will also add the full code for those interested below this one:

This is the part i had to cut out because of it's enormous src.

 { name: "Ferrari Portofino 2021   ", value: "250,000", imageSrc:
 { name: "Ferrari Portofino 2021   ", value: "250,000", imageSrc:
 { name: "Ferrari Portofino 2021   ", value: "250,000", imageSrc:
 { name: "Ferrari Portofino 2021   ", value: "250,000", imageSrc:
 { name: "Ferrari Portofino 2021   ", value: "250,000", imageSrc:

HTML

        <div class="the-images">
                <img id="item1" class="item" src="EXAMPLE" alt="Item 1">
                <img id="item2" class="item" src="EXAMPLE" alt="Item 2">
             </div>

CSS

#item1:hover,
#item2:hover {
  transform: scale(1.1); 
  transition: transform 0.1s ease-in-out; 
}#item1:hover,
#item2:hover {
  transform: scale(1.1);
  transition: transform 0.1s ease-in-out; 
}
#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
color: white;
}

FULL CODE

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <title>Whats Worth More</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body class="body">
    <main>
        <div id="main-page">
            <header class="navbar">
                <h1><a href="#">WWM</a></h1>
                <nav class="nav">
                    <ul>
                        <li>
                            <a href="#">Play</a>
                            <a href="#">Categories</a>
                        </li>
                    </ul>
                </nav>
            </header>
        </div>
        <section class="main">
            <div class="wwm">
                <h2 class="title">Whats Worth More</h2>
                <button class="play">Play</button>
            </div>
        </section>
        <div class="popup" id="popup">
            <div class="popup-content">
                <h2>Select a Category</h2>
                <div class="categories">
                    <button class="category">Random</button>
                    <button class="category">Boats & Planes</button>
                    <button class="category">Watches</button>
                    <button class="category">Houses</button>
                    <button class="category">Cars</button>
                    <button class="category">Drinks</button>
                    <button class="category">Food</button>
                    <button class="category">Companies</button>
                    <button class="category">Art</button>
                    <button class="category">Clothing</button>
                    <button class="category">Technology</button>
                    <button class="category">Electronics</button>
                    <button class="category">Jewelry</button>
                    <button class="category">Collectibles</button>
                </div>
                <button class="close-popup" id="close-popup">Close</button>
            </div>
        </div>
    </main>
    <div class="gameStarted">
        <h2 id="question-text" class="question-text">
            <span class="item">${item2.name} ${item2.value}</span>
            <span class="space">&nbsp;&nbsp;&nbsp;</span>
            <span class="item">${item1.name} ${item1.value}</span>
        </h2>
            <div class="the-images">
                <img id="item1" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHcCjus21gcwf_7ZWtWnI1C8VF6il_oIJ5L0yCIuR-I5YOr_ZGzZLL14BeTxWL4TfNr1nwJqkdsQiIUjeTOrj9RNKSN-05eq91gQP4fWrPSKlqOeXcXdkZtKd1F0UlLruAfupEnybDoKx7BnduYLYM32LEZPy_qJqJoABqE4lhytYWFyo-uMbZ8GlV3IjTl4fWwRNT1hKMiQoX2J0marXDA5CrtrRq9nJQE0nH2rtSCSwZmJnCQc0PrEmeA_Rg5Ss6gDzvpwWr7dQmH0IfUCXxZiJl1HFNYGCoSr2Rm79hKdVJPlLWeaevPgwDJ7Yy9igO6IdMc77QNax3jA93bMYqkChm2wa40ev8HPs7h2Q_nteXUFq_b1r2I7ap866gONYBdE0qeZcd0uSudyzTgIyz9VTsiDKxIItR7aljYE_BfL2QZHKYWmqSvuxLx0FM85qczVPcH1BI-T3goi5EvvUOcKeTUJt3sUdZsr_LQoMPlYEa2bvQcTGlypCMI7hcTYOLwNPsKV1RFCJu4MxlcnLEO6S8S9dB6CkSPZQhijU_gxXehMkj64EdCVcOlzIda1r5HegE7KaHEEoxAv8XbhM0qpnjeQrMs1an8jNqAR6IL3LW-tcQlsGljFCf_XNp0adrHsLSlvablMdiRokWnYlU3dton4yw5-3KXPdr8G-EVSrTLf1C8HAZvRx0eoSTHEJD-hxjRbieVyzhHeSjBJ6mZGIHbfnwuhudLyxYlEPZkqWRAUin-oh_iQcNXSs_wLko-XCoDt0gllXM27oa5tdvfJk4PiUKBO-fa25MCxF0G4P8aKOh_WKPkIddRswVhUh3aTPNI6O9JbDJpgeA6n-pGx8vf1lS_e79wxFjcFJAoPtvxl423aB4Oe-xCZbZlVrVMJZPQAkOhFtOQOcNSZ1yq5XH9H6bz2G9q-g_I2BkCb1KwKJ5cftOR7vg=w707-h353-s-no?authuser=0" alt="Item 1">
                <img id="item2" class="item" src="https://lh3.googleusercontent.com/pw/ADCreHdP1_Kf_n02AGb882NS26oo4NnFmqUylj7ww8ecIoHje6Zl4z_uQ8_z8KpfF126leO4l_TImfWiy0dTE0CYApw_dekxeH6XedeRv3iMrrBfCm0Ds2BhakRUXStwNm8_YyNN4fcl3NnlLpN1jMls1ixO0-WG0hmshnuFgygug-qvuMyd8hpQW1HKwslTr-zPBn2M6t_odmoQUQAWQseNysVvrCo7me-9lnfmumG17oFie0S6Pj7mEE_q4BwiYk4fQ8iYxfiuDyGdbLlR6VmRdvkf7BlbZqA417AAdzyWohLSZoU2aY_K0EP0b-7oZF76AQYc6kQE-nd2QU9nhBT9Ij6SLNLdavFUQck4uqZzVSgUXPo81hGPpeywq_FF3ll37TlEMWnQSgSEm80xgmGP7KkWK-OIVpF_-CHrCqB-18d5LnRcut48HXjqPeJRXzxRntB0HVCFvq0nZWbI2OiMF3ILJWp09gyQWr3zLsM5CfDm3NWmVLy4LUg3BNNfJ9BdBNH0TdyFzEH6vxlQkaEtVY86K9eMJVc9tqt1T6LeBXxh55YtK0XVO7Kq7Wk0JUAh6J_OqqSMtZNBYEDPOge0FXLuGLXXlZ-hDxYQjlOA4-J6ALAEY6qlcKdQu_iG6sDToC0nBlbAUmq0JYk194q8ojYxfHps-HoYCZxFeauawiC2mY49omlR_YEslegwi79DMOttecI56CdqWK6Syd_mOsd57lM9eJJ4_r2U3BUC1YHfL8bEVIAqqYQJCwkMP1wa8UYbc3gjDpmQBNNZ_dMvT2rnlYBH-S46BCeYnJH_WHPzK0NXLY5p7Qtk41o2EFoyX0843UySheVz_oRAWzQdY0-nt4DNIPOeNo7WSBqtRF9e00UevzidggdRcgZgLU4xacjkkpy6k7YhY9xsFlwUfuXvm6uuBVSAtJN3m9Gg630Jn6QgX1lb7LOn7A=w654-h381-s-no?authuser=0" alt="Item 2">
             </div>
             <div class="imgtxt">
               
             </div>
             <div class="line"><p class="vs">VS</p></div>
        <div id="score-container" class="score-container">
            <p id="score-text" class="score-text">Score: 0</p>
        </div>
    </div>

    <script src="questions.js"></script>
    <script src="game.js"></script>
</body>
</html>

// Store your items and their values in an array of objects


  let currentScore = 0;
  
  // Get references to HTML elements
  const item1Element = document.getElementById("item1");
  const item2Element = document.getElementById("item2");
  const scoreTextElement = document.getElementById("score-text");
  const questionTextElement = document.getElementById("question-text");
  
  function startNewRound() {
    // Get two random item indices
    const index1 = Math.floor(Math.random() * items.length);
    let index2;
    do {
      index2 = Math.floor(Math.random() * items.length);
    } while (index2 === index1); // Make sure index2 is different from index1
  
    // Get the corresponding items
    const item1 = items[index1];
    const item2 = items[index2];
  
    // Display the items and question
    item1Element.src = item1.imageSrc; // Set the source for the image
    item2Element.src = item2.imageSrc;
    questionTextElement.innerHTML = `${item2.name} ${item2.value}&nbsp;&nbsp;&nbsp;${item1.name} ${item1.value}`;

    // Store the correct answer index
    const correctIndex = item1.value > item2.value ? 0 : 1;
  
    // Add click event listeners to the items
    item1Element.addEventListener("click", function () {
      handleItemClick(0, correctIndex);
    });
  
    item2Element.addEventListener("click", function () {
      handleItemClick(1, correctIndex);
    });
  }
  
  function handleItemClick(clickedIndex, correctIndex) {
    if (clickedIndex === correctIndex) {
      // Correct guess
      currentScore++;
      scoreTextElement.textContent = `Score: ${currentScore}`;
    } else {
      // Incorrect guess
      // Handle game over or show a message to play again
      // You can add this logic here
    }
  
    // Remove click event listeners
    item1Element.removeEventListener("click");
    item2Element.removeEventListener("click");
  
    // Start a new round after a short delay
    setTimeout(startNewRound, 1000);
  }
  
  document.addEventListener("DOMContentLoaded", function () {
    // Add your code for handling the popup and category selection here
  
    // Start the game when a category is selected
    startNewRound();
  });

document.addEventListener("DOMContentLoaded", function() {
    const playButton = document.querySelector(".play");
    const popup = document.getElementById("popup");
    const closePopupButton = document.getElementById("close-popup");
    const categoryButtons = document.querySelectorAll(".category");
    const gameStarted = document.querySelector(".gameStarted");
    const mainPage = document.getElementById("main-page");
    const main = document.querySelector("main");
    const body = document.querySelector(".body");

    playButton.addEventListener("click", function() {
        popup.style.display = "block";
    });

    closePopupButton.addEventListener("click", function() {
        popup.style.display = "none";
    });

    // Add click event listeners to all category buttons
    categoryButtons.forEach(function(button) {
        button.addEventListener("click", function() {
            // Close the popup
            popup.style.display = "none";

            // Hide the entire page
            mainPage.style.display = "none";

            // Start the game
            gameStarted.style.display = "block";

            main.style.display = "none";

           gameStarted.classList.add('active');
           body.classList.add('active');
           
        
         

        });
    });
});



*{
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    box-sizing: border-box;
    font-family: Ink Free;
}
/*SET THE NAVIGATION BAR AT THE TOP OF THE SCREEN, REMOVE BACKGROUND COLOR AND BOX SHADOW LATER ON*/
.navbar{
    
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  align-items: center;
 

  
}
/*SETTING THE LOGO COLOR AND ANIMATION*/
h1{
    color: white;
    font-size: 2rem;
    margin-left: 2rem;
   
}
h1>a:hover{
    margin-left: 2rem;
    transition: 0.5s ease-out;
  
}
/*SETTING THE NAVBAR*/
li>a{
    text-decoration: none;
    color: white;
    font-size: 1.4rem;
    margin-left: 0.6rem;
    margin-right: 3rem;
}
li>a:hover{
    color:bisque;
    opacity: 0.8;
    transition: 0.25s ease-out;
}
h1>a{
    text-decoration: none;
    color: white;
}
ul{
    list-style-type: none;
}

/*BACKGROUND IMAGE SET TO FIT, CHANGE THE WIDTH AND HEIGHT VH IF NEEDED, OPACITY TO 1 OR REMOVE*/
body{
    background-image: url('https://wallpapercave.com/wp/BW3DgZD.jpg');
  background-size: cover; 
    width: 100vh;
    height: 100vh;
    opacity: 0.96;
}
/*THE MAIN TEXT AT THE MIDDLE OF THE SCREEN*/
.wwm{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
}

.title{
    font-size: 5rem;
}
/*PLAY BUTTON NEEDS JAVASCRIPT*/
.play{
    margin-top: 1rem;
font-size: 3rem;
padding: 0rem 3rem;
background-color: rgb(122, 64, 72);
color: white;
}
.play:hover{
    opacity: 0.8;
    transition: .20s ease-in-out;
}


/*chatgpt*/
.popup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

.popup-content {
    background: white;
    width: 60%;
    max-width: 400px;
    margin: 20px auto;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.categories {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 20px;
}

.category {
    margin: 5px;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.5rem
}

.close-popup {
    margin-top: 20px;
    background-color: #DC3545;
    font-size: 1.5rem;
}



.gameStarted {
    display: none;
}

.gameStarted.acive{
    display: flex;
    padding: 30rem;
}


.divv{
    flex-direction: row;
    border: 2px solid red;
}

.the-images {
    display: flex;
}

.body.active{
    background-image: url('https://images.hdqwalls.com/download/black-gradient-b9-1920x1080.jpg');
    transition: 1s ease;
}
/* Style the game container */
.gameStarted {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}



/* Style the item images */
.item {
display: flex;
grid-template-columns: 2 1 repeat();

justify-content: center;

}


.gameStarted{
    display: none;
}

#item1{
position: absolute;
display: flex;
top: 50%;
left: 80%;
transform: translate(-50%, -50%);
color: white;
}
#item2{
    position: absolute;
display: flex;
top: 50%;
left: 20%;
transform: translate(-50%, -50%);
color: white;
}


.line{
    position: absolute;
display: flex;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 100vh;
align-items: center;
opacity: 0.9;
}
.vs {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: linear-gradient(to bottom, #ff0000, #ee4679);
    color: white;
    font-size: 44px; /* Adjust font size as needed */
    font-weight: bold; /* Optionally make the text bold */
}

.imgtxt
{
    position: absolute;
    color: white;
    font-size: 3rem;

    display:  flex;
    justify-content: space-around;
    top: 69%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160rem;
}

:root{

    --color: white;
    --font-size: 3rem;
}
.dog {
    background-color: var(--color); /* Use the variable --main-color */
    color: white;
    padding: 10px 20px;
  }
  .question-text {
    color: white;
    display: flex;
    justify-content: space-around;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(0%, 2440%);
    width: 2000px;
   

}


.item {
    margin-right: 1100px; /* Adjust the margin to control the space between items */
}


/* Add this CSS to your existing styles.css file */

#item1:hover,
#item2:hover {
  transform: scale(1.1); /* Increase the scale on hover */
  transition: transform 0.1s ease-in-out; /* Add a smooth transition effect */
}

I tried inspect element, different scales, adding scales to the #item1 and #item2 and nothing worked so I came here for help.

Solution

  • Apart from having the :hover styles for #item 1 and #item2 applied twice, it's the transform: translate(-50%, -50%); which is the culprit here.

    I deactivated it in the example below and increased the scaling.

    #item1:hover,
#item2:hover {
  transform: scale(1.5); 
  transition: transform 0.1s ease-in-out; 
  transform-origin: center;
}

#item1{
  position: absolute;
  display: flex;
  top: 50%;
  left: 80%;
  //transform: translate(-50%, -50%); <— remove
  color: white;
}
#item2{
  position: absolute;
  display: flex;
  top: 50%;
  left: 20%;
  //transform: translate(-50%, -50%); <— remove
  color: white;
}

/* added for code snippet */
#item1,
#item2 {
    height: 100px;
    width: 100px;
}
     <div class="the-images">
    <img id="item1" class="item" src="https://static.vecteezy.com/system/resources/previews/013/078/569/non_2x/illustration-of-cute-colored-cat-cartoon-cat-image-in-format-suitable-for-children-s-book-design-elements-introduction-of-cats-to-children-books-or-posters-about-animal-free-png.png" alt="Item 1">
    <img id="item2" class="item" src="https://static.vecteezy.com/system/resources/previews/013/078/569/non_2x/illustration-of-cute-colored-cat-cartoon-cat-image-in-format-suitable-for-children-s-book-design-elements-introduction-of-cats-to-children-books-or-posters-about-animal-free-png.png" alt="Item 2">
</div>