Lines appear after scaling up content

user_19857100 0
Viewed 47

I'm learning CSS and HTML at the moment and I'm having a hard time understanding why lines appear when I hover over the content. Please, understand that I am just starting to learn and my code is probably unorganised and not as clean as it should be. This is actually my first try doing something alone. Any advice would be appreciated. Thank you.

* {
    margin: 0;
    padding: 0;
}

ul {
    list-style-type: none;
    margin: 0 auto;
    background-color: #f8f2f3;
    justify-content: center;
    padding: 25px 40px;
    line-height: 30px;
    font-size: 14px;
    max-height: 100px;

  } 

.price {
    background-color: #f8f2f3;
    text-align: center;
    overflow: hidden;
    
}
.purchase {
    background-color: #f8f2f3;
    text-align: center;
    overflow: hidden;
    
}

.button {
    border: 2px solid #087c99;
    width: fit-content;
    padding: 10px 15px;
    margin: 25px 0;
    display: inline-block;
    border-radius: 10px;
    color: #087c99;
    font-weight: 600;
    font-size: 20px;
    transition: all ease-in-out 0.2s;
}
.dollars {
    font-size: 50px;
    padding-top: 50px;
    

}

  ul span {
    color: rgb(21, 175, 21);
    font-weight: 900;
    margin-right: 3px;
    
  }
body {
    display: flex;
    justify-content: center;
    align-content: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: #343633 ;
    
}
.plan {
    width: 70%;
    max-width: 300px;
    justify-content: space-evenly;
    margin: 100px 30px 0 30px;
    transition: all ease-in-out 0.2s;
    flex-wrap: wrap;
    overflow: hidden;
    
    

}

.header {
    background-color: #17bce6 ;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    box-shadow: 0px 0px 10px 1px rgb(40, 30, 30);
    overflow: hidden;
    
}

.header h3 {
    color: white;
    font-size: 25px;
}

.header p {
    color: white;
}

.minimum {
    background-color: #f8f2f3;
    padding: 20px;
    font-size: 13px;
    text-align: center;
   border-bottom-right-radius: 25px;
   border-bottom-left-radius: 25px;
   perspective: 1px; 
   overflow: hidden;
}
.plan:hover {
    transform: scale(110%);
    border: none;
    border-collapse: collapse;
    overflow: hidden;

}

.button:hover{
    background-color: #087c99;
    color: white;
    cursor: pointer;
    overflow: hidden;
}
<!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>Try Out</title>
    <link rel="stylesheet" href="plan.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">

</head>
<body>
    <div class="plan">
        <div class="header">
            <h3>Starter Plan</h3>
            <p class="description">For those just getting started</p>
        </div>
        <div class="list">
            <ul>
                <li> <span class="check">✓</span> Acccess to all recordings </li>
                <li> <span class="check">✓</span> 5 code downloads per day</li>
                <li> <span class="check">✓</span> 1 live tutorial every month</li>
                <li> </li>
            </ul>
        </div>
             
        <div class="price">
            <p class="dollars">$68</p>
            <p class="permonth">per month</p>
        </div>
        <div class="purchase">
            <span class="button">Purchase</span>
        </div>
        <p class="minimum">Minimum spend $869 over 12 months</p>

    </div>
    
    <section class="plan">
        <div class="header">
            <h3>Basic Plan</h3>
            <p class="description">The perfect all-rounder</p>
        </div>
        <ul>
            <li> <span class="check">✓</span> Acccess to all recordings </li>
            <li> <span class="check">✓</span> 20 code downloads per day</li>
            <li> <span class="check">✓</span> 5 live tutorial every month</li>
            <li> </li>
        </ul>
        <div class="price">
            <p class="dollars">$99</p>
            <p class="permonth">per month</p>
        </div>
        <div class="purchase">
            <span class="button">Purchase</span>
        </div>
        <p class="minimum">Minimum spend $1.118 over 12 months</p>
    </section>

    <section class="plan">
        <div class="header">
            <h3>Enterprise Plan</h3>
            <p class="description">For people serious about coding</p>
        </div>
        <div class="list">
            <ul>
                <li> <span class="check">✓</span> Acccess to all recordings </li>
                <li> <span class="check">✓</span> Unlimitted code downloads per day</li>
                <li> <span class="check">✓</span> Personalized text editor</li>
            </ul>
        </div>

        <div class="price">
            <p class="dollars">$250</p>
            <p class="permonth">per month</p>
        </div>
        <div class="purchase">
            <span class="button">Purchase</span>
        </div>
        <p class="minimum">Minimum spend $3000 over 12 months</p>
    </section>


    
</body>
</html>

css html
2 Answers

It's because the scaling, the background color hits through. The following code will fix the issue, cosmetically:

.plan {
    background-color: #f6f2f3;
    border-radius: 25px;
}
user_28174420 
<div class="plan">
    <div class="header">
        <h3>Starter Plan</h3>
        <p class="description">For those just getting started</p>
    </div>
    <div class="list">
        <p class="check">✓ Acccess to all recordings</p>
        <p class="check">✓ Acccess to all recordings</p>
        <p class="check">✓ Acccess to all recordings</p>
        <div class="price">
            <p class="dollars">$68</p>
            <p class="permonth">per month</p>
        </div>
        <button class="button">Purchase</button>
        <div class="footer">Minimum spend $869 over 12 months</div>
    </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.plan {
    width: 70%;
    max-width: 300px;
    margin:  auto;
    height: 300px;
}
.button {
    border: 2px solid #087c99;
    width: fit-content;
    padding: 10px 15px;
    margin: 25px 0;
    display: inline-block;
    border-radius: 10px;
    color: #087c99;
    font-weight: 600;
    font-size: 20px;
    transition: all ease-in-out 0.2s;
}

.header {
    background-color: #17bce6;
    align-content: center;
    justify-content: center;
    margin: 0 auto;
    padding: 20px;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    text-align: center;
    box-shadow: 0px 0px 10px 1px rgb(40, 30, 30);

}

.footer {
    padding: 20px;
    font-size: 14px;

}

.plan:hover {
    transform: scale(110%);
    border: none;
    border-collapse: collapse;


}

.button:hover {
    background-color: #087c99;
    color: white;
    cursor: pointer;
    overflow: hidden;
}

.list {

    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #f8f2f3;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
.list p {
    padding: 25px 40px;
    line-height: 30px;
    font-size: 14px;
    max-height: 100px;
}
user_196222480
Related