How to make the div not expand its size when the image is hovered?

user_9993943 0
Viewed 70

*{
    margin: 0;
}
nav {
    width:100%;
  
}



.navbar .container ul:hover{
    cursor: pointer;
}
.navbar .container{ 
    
    width:100%;
    display: flex;
    border-bottom: 1px solid gray;
    box-shadow: 0px 6px 11px -4px #5F5F5F
    ;
}
.navbar .container ul li {
    font-family: 'Times New Roman', Times, serif;
    text-transform: uppercase;
    text-align:center;
    font-weight:900;
    font-size:13px;
}


.antras {
    display: flex;
    justify-content: flex-end;
}
.f {
    color:green;
    font-size:15px;
}

span {
    font-size:30px;
}
li a {
    text-decoration: none;
    
 }
li input {
    border:none;
    border-bottom: 1px solid black;
    height:42px;
    width:200px;
}

li input:focus {
    color:red;
}

.navbar .container ul {
    width:100%;
   display: flex;
   flex-basis:70%;
   flex-wrap: wrap;
   justify-content: space-around;
   list-style-type: none;
   height:90px;
   align-items: center;
   
}

.antras {
    display: flex;
    flex-basis: 1%;
    justify-content: center !important}


.main {
    display:flex;
    margin:0 auto;
    width:90%;
    margin-top:30px;
   
}

.main .container {
    display:flex;
    overflow: hidden;
    width:100%;
   
}
.main .container img {
    flex-basis:50%;
    height:370px;
    overflow: hidden;
    transform: scale(1);
    transition: 0.3s ease-in-out;
   
}



.main .container div {
  
   text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    line-height:1.5;
    padding: 40px 10px 10px;
    
}

.main .container div h1 {
    font-size:32px;
    color: rgb(5, 36, 5);
    margin-bottom: 1rem;
   
    margin: 0 0 10px;
}

.main .container div p{
    font-size: 18px;
    margin:0 0 30px;  
    margin-bottom: 3rem;
    font-family: sans-serif;
    
}

.main .container div a {
    color:green;
    letter-spacing: 3px;
    text-decoration: none;
    
}

.cont .card {
    
    overflow: hidden;
}

.cont .card img {
    transition: transform 1s ease-in;
}
.cont .card img:hover {
    transform: scale(1.5);
 }
 .cont {
     width:90%;
     margin:auto;
    display:flex;
    justify-content: center;

   
}

.cont .card {
    height:400px;
    padding-top:20px;
    overflow: hidden;

}

.cont .card:nth-child(1) , .cont .card:nth-child(2){
   padding: 20px 20px 0 0;
}


.cont .card .txt {
    height:500px;
    margin-top: 20px;
    text-align:center;
    
}
.cont img {
    width:100%;
    
}
<!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>Document</title>
    <link rel="stylesheet" href="stories.css">
    <script src="https://kit.fontawesome.com/a4750c1d6b.js" crossorigin="anonymous"></script>
</head>
<body>
    
    <nav class="navbar">
        <div class="container">
            <ul class="first">
                <li class="f">Starbucks <span><br>STORIES<br></span> &news</li>
                <li>People</li>
                <li>Planet</li>
                <li>Coffee &craft</li>
                <li>Press center</li>
               
            </ul>
            
            <ul class="antras">
                <li><input type="text" placeholder="Search"><a href="#">></a>
                </li>
               <li><i class="fas fa-globe"></i></li>
                
            </ul>
       
        </div>
    </nav>
    
    <article>
        <div class="main">
            <div class="container">
                <figure>
                <img src="https://www.flowerwatch.com/assets/files/leader/rozen.jpg" alt="">
            </figure>
                <div>
                    <h1>Starbucks celebrates everyday Black excellence during Black History Month </h1>
                    <p>
                        In February, Starbucks is proud to honor Black History Month and celebrate Black excellence and the many ways partners (employees) demonstrate it every day.                                    </p>
                    <a href="#">READ MORE></a>
                    </div>
            </div>

           
        </div>
       

    </article>

    <div class="cont">
        <div class="card">
            <img src="https://www.flowerwatch.com/assets/files/leader/rozen.jpg" alt="">
            <div class="txt">
                <h2>Key Takeaways from Starbucks Q1 FY22 Earnings Call</h2>
            </div>
        </div>
        <div class="card">
            <img src="./images/stories3.png" alt="">
            <div class="txt">
                <h2>‘I want people to feel like they belong’: Starbucks I&D chief Dennis Brockman focuses on ultimate goal</h2>
            </div>
        </div>
        <div class="card">
            <img src="./images/stories3.png" alt="">
            <div class="txt">
                <h2>‘I want people to feel like they belong’: Starbucks I&D chief Dennis Brockman focuses on ultimate goal</h2>
            </div>
        </div>
    </div>
</body>
</html>

Hi , Im currently trying to get the image not to expand its div on hover. But whenever I hover it , it just keeps expanding the image to its div size. Is there any way to dodge this? I'm currently trying to replicate this effect like theres on this website :https://w3bits.com/labs/css-image-hover-zoom/, tried to do exactly like he did but it doesnt exactly work like his . ty

css html
1 Answers

As @ChrisW mentioned in the comments, setting the image as a background-image on the parent makes the most sense and is what I would do also.

This alternative is a bit hacky, but it does the job if you don't want the image as a background-image. You may have to resize the browser to see it work. See the changes I made in CSS and HTML below.

* {
  margin: 0;
}

nav {
  width: 100%;
}

.navbar .container ul:hover {
  cursor: pointer;
}

.navbar .container {
  width: 100%;
  display: flex;
  border-bottom: 1px solid gray;
  box-shadow: 0px 6px 11px -4px #5F5F5F;
}

.navbar .container ul li {
  font-family: 'Times New Roman', Times, serif;
  text-transform: uppercase;
  text-align: center;
  font-weight: 900;
  font-size: 13px;
}

.antras {
  display: flex;
  justify-content: flex-end;
}

.f {
  color: green;
  font-size: 15px;
}

span {
  font-size: 30px;
}

li a {
  text-decoration: none;
}

li input {
  border: none;
  border-bottom: 1px solid black;
  height: 42px;
  width: 200px;
}

li input:focus {
  color: red;
}

.navbar .container ul {
  width: 100%;
  display: flex;
  flex-basis: 70%;
  flex-wrap: wrap;
  justify-content: space-around;
  list-style-type: none;
  height: 90px;
  align-items: center;
}

.antras {
  display: flex;
  flex-basis: 1%;
  justify-content: center !important
}

.main {
  display: flex;
  margin: 0 auto;
  width: 90%;
  margin-top: 30px;
}

.main .container {
  display: flex;
  overflow: hidden;
  width: 100%;
}

.main .container img {
  flex-basis: 50%;
  height: 370px;
  overflow: hidden;
  transform: scale(1);
  transition: 0.3s ease-in-out;
}

.main .container div {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  line-height: 1.5;
  padding: 40px 10px 10px;
}

.main .container div h1 {
  font-size: 32px;
  color: rgb(5, 36, 5);
  margin-bottom: 1rem;
  margin: 0 0 10px;
}

.main .container div p {
  font-size: 18px;
  margin: 0 0 30px;
  margin-bottom: 3rem;
  font-family: sans-serif;
}

.main .container div a {
  color: green;
  letter-spacing: 3px;
  text-decoration: none;
}

.cont .card {
  overflow: hidden;
}

.cont .card img {
  transition: transform 1s ease-in;
}

.cont .card img:hover {
  transform: scale(1.5);
}

.cont {
  width: 90%;
  margin: auto;
  display: flex;
  justify-content: center;
}

.cont .card {
  margin-top: 20px;
  overflow: hidden;
}

.cont .card:nth-child(1),
.cont .card:nth-child(2) {
  margin: 20px 20px 0 0;
}

.cont .card .txt {
  height: 500px;
  z-index: 9999;
  position: relative;
  margin-top: 20px;
  text-align: center;
}

.cont img {
  width: 100%;
}

.white {
  z-index: 1;
  position: relative;
  top: -10px;
  background-color: white;
  height: 200px;
}
<!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>Document</title>
  <link rel="stylesheet" href="stories.css">
  <script src="https://kit.fontawesome.com/a4750c1d6b.js" crossorigin="anonymous"></script>
</head>

<body>

  <nav class="navbar">
    <div class="container">
      <ul class="first">
        <li class="f">Starbucks <span><br>STORIES<br></span> &news</li>
        <li>People</li>
        <li>Planet</li>
        <li>Coffee &craft</li>
        <li>Press center</li>

      </ul>

      <ul class="antras">
        <li><input type="text" placeholder="Search"><a href="#">></a>
        </li>
        <li><i class="fas fa-globe"></i></li>

      </ul>

    </div>
  </nav>

  <article>
    <div class="main">
      <div class="container">
        <figure>
          <img src="https://www.flowerwatch.com/assets/files/leader/rozen.jpg" alt="">
        </figure>
        <div>
          <h1>Starbucks celebrates everyday Black excellence during Black History Month </h1>
          <p>
            In February, Starbucks is proud to honor Black History Month and celebrate Black excellence and the many ways partners (employees) demonstrate it every day. </p>
          <a href="#">READ MORE></a>
        </div>
      </div>


    </div>


  </article>

  <div class="cont">
    <div class="card">
      <img src="https://www.flowerwatch.com/assets/files/leader/rozen.jpg" alt="">
      <div class="white"></div>
      <div class="txt" style="margin-top: -10.1rem">
        <h2>Key Takeaways from Starbucks Q1 FY22 Earnings Call</h2>
      </div>
    </div>
    <div class="card">
      <img src="./images/stories3.png" alt="">
      <div class="txt">
        <h2>‘I want people to feel like they belong’: Starbucks I&D chief Dennis Brockman focuses on ultimate goal</h2>
      </div>
    </div>
    <div class="card">
      <img src="./images/stories3.png" alt="">
      <div class="txt">
        <h2>‘I want people to feel like they belong’: Starbucks I&D chief Dennis Brockman focuses on ultimate goal</h2>
      </div>
    </div>
  </div>
</body>

</html>

user_164963570
Related