为什么我无法让图像悬停效果像我想要的那样工作？

问题描述 投票：0回答：1

我正在为学校建立一个网页，现在我建立一个无乳糖页面 有了一些悬停效果，现在我想让我的文本框更大，这样它看起来就不小了。 所以我希望出现的盒子有更大的宽度，这样我也可以在里面放更多的 tekst 只是现在它变窄了，当它变长时，它就在下面的图像后面：-/ 最后，我想要两行配料，下面是制作步骤。

/* CSS Document */

* {
      margin:  0px;
      padding: 0px;
      border:  0px;
  }



                          /*Body*/

body {
      font-family:"Helvetica scary";
      background-image: url("../images/background2.jpg");
      background-size: cover;
      position: relative;
}

.wrapper {
    width: 100%;
}

                           /*Logo*/

.logo {
      text-align: center;
      clear: both;
      opacity: 1;
      background-color: rgba(255,255,255,0.6);
}



                           /*Topnav*/

.topnav {
      width: 100%;
      opacity: 1;
      background-color: rgba(255, 255, 255, 0.6);
      margin-bottom: 10px;
      padding: 5px 0px 5px 0;
      border-bottom: dotted #66A761;
      border-top: dotted #66A761;
      position: relative;
      text-align:center;
}

.topnav ul {
      display: inline;
      text-align: center;
}

.topnav ul li {
      display: inline-block;
      margin: 0 47px;
      padding: 0;
      text-indent: 0;
      position: relative;
      cursor: pointer;
      -webkit-transition: all 0.2s;
      -moz-transition: all 0.2s;
      -ms-transition: all 0.2s;
      -o-transition: all 0.2s;
      transition: all 0.2s;
}


.topnav a {
      font-size: 20px;
      font-weight: bold;
      text-decoration: none;
}

.topnav a:link {
      color: #9F257D;
}

.topnav a:hover {
      color: #66A761;
}

.topnav input {
      padding: 5px;
      margin: 0 5px;
      right: 20px;
      border-radius: 25px;
      border: 0;
      background-color: rgba(0,0,0,.8);
      width: 150px;
      opacity: 0.7;
      position: flex;
      color: #FFF;
    
}


.topnav button {
      background-color:#66A761;
      border-radius: 25px;
      padding: 5px;
      color: #9FFF;
      opacity: 0.9;
      font-style:oblique;
}




                          /*submenu*/


.topnav ul li ul {
      display: block;
      position: absolute;
      background-color: rgba(255, 255, 255, 0.6);
      padding: 5px 5px;
      z-index: 1;
}

.topnav ul li:hover ul li {
      display: block;
      z-index: 1;
}

.topnav li a:active {
      color: #ffffff;
    }

.topnav ul li ul li {
      display: none;
      margin: 0;
      padding: 2px;
      
}
                         /*content*/

.container {
     width: 930px;
     margin: 70px auto 0;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     margin-bottom: 70px;
}

.container .box {
     position: relative;
     width: 300px;
     height: 228px;
     background: #555;
     margin: 5px;
     margin-bottom: 10px;
     box-sizing: border-box;
     display: inline-block;
}

.container .box .imgbox {
     position: relative;
     overflow: hidden;
}

.container .box .imgbox img {
     transition: transform 2s;
}

.container .box:hover .imgbox img {
     transform: scale(1.2);
}

.container .box .details {
     position: absolute;
     top: 10px;
     left: 10px;
     bottom: 10px;
     right: 10px;
     backgound: rgba(0,0,0,.8);
     transform: scaleY(0);
     transition: transform .5s;
}

.container .box:hover .details {
     transform: scaleY(1);
}

.container .box .details .content {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     text-align: center;
     padding: 15px;
     color: #FFF;
}

.container .box .details .content h2{
     margin: 0;
     padding: 0;
     font-size: 20px;
     color: #FFF;
     background-color: rgba(0,0,0,.8);
     opacity: 0.7;
     border-radius: 5px;
}

.container .box .details .content p{
     margin: 0;
     padding: 0;
     font-size: 15px;
     color: #FFF;
     background-color: rgba(0,0,0,.8);
     opacity: 0.7;
     border-radius: 5px;
}

.container .box .details .content a {
     margin: 0;
     padding: 0;
     font-size: 20px;
     color: #FFF;
     text-decoration: none;
}


                         /*Footer*/

.footer {
     clear: both;
     margin: 60px 0 0 0;
     padding: 30px;
     text-align: center;

     color :#9F257D;
     border-top: dotted #66A761;
     border-bottom: dotted #66A761;
     opacity: 0.9;
     background-color: rgba(255,255,255,0.6);
}

.footer img {
     padding: 0 5px;
}


                          /*Under Construction*/


@media only screen and (min-width: 768px) and (max-width: 991px) {
    
    .wrapper {
        width: 100%
    }

    
                           /*topnav*/
.topnav {
    flex-direction: column;
    
}
    
.topnav ul {
    flex-direction: row;
    margin-bottom: 1em;
}   
    
}


@media only screen and (max-width: 767px) {
    
    
.wrapper {
    width: 100%;
    font-size: 15px;
}

                  
                           /*topnav*/
.topnav {
    flex-direction: column;
    max-width: 100%;
    align-content: center;
    
}
    
.topnav ul {
    flex-direction: row;
    margin-bottom: 1em;
}
    
.topnav li {
    padding: 0;
    font-size: 11px;
        
}
    
.topnav input {
    
}
    

                         /*Text Area*/  
.main {
    max-width:100%;
}


                         /*content*/

.container {
    max-width: 100%;
}
}



@media only screen and (max-width: 500px) {
    
    .banner {
        visibility: hidden;
        max-width: 300px;
}
}
<!doctype html>
<html>
<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>lactosevrij</title>
<link href="css/lactosevrij.css" rel="stylesheet" type="text/css">
</head>

<body>  
    
<div class="wrapper">

                           <!--Logo-->
<div class="logo">  
  <header>
   <a href="index.html"><img src="images/fflogo1.png" alt=""/></a>
  </header>
</div>
    

    
                           <!--Topnav-->
<div class="topnav">
    <nav>
    <ul>
        <li><a href="recepten.html">Recepten</a>
          <ul>
             <li><a href="lactosevrij.html">Lactosevrij</a></li>
             <li><a href="suikervrij.html">Suikervrij</a></li>
             <li><a href="glutenvrij.html">Glutenvrij</a></li>
          </ul>
        </li>
        <li><a href="varianten.html">Varianten</a>
          <ul>
             <li><a href="basis1.html">Basis</a></li>
             <li><a href="standaard1.html">Standaard</a></li>
             <li><a href="luxe1.html">Luxe</a></li>
          </ul>
        </li>
        <li><a href="contact.html">Contact</a></li>
        <li><a href="overons.html">Over ons</a></li>
   </ul> 
        <input type="search" placeholder="Search.." name="search">
        <button type="submit"><i class="fafa-search"></i>Search</button>
  </nav>
</div>  


<!--containers-->
<div class="container">
    

                           <!--Lactosevrij recept 1-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/caponata.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
        <h2>Spaghetti Carbonara</h2>
<p><br>200 g gerookt ontbijtspek
<br>25 g ongezouten roomboter
<br>2 el traditionele olijfolie 
<br>1 teen knoflook
<br>2 middelgrote eieren
<br>300 g spaghetti
<br>50 g Parmigiano Reggiano
<br>50 g Pecorino Romano
<br>1 tl versgemalen zwarte peper</p>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 2-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/geroosterde-garnalen.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">  
        <h2>geroosterde-garnalen</h2>
        <p><br>450 g diepvries rauwe en ongepelde reuzengarnalen (zak, ontdooid)
          <br> 1 teen knoflook 
          <br> 1 citroen
          <br> 1 medium handsinaasappel
          <br> 3 el traditionele olijfolie
          <br> 1 takje rozemarijn (naaldjes gerist)</p>
             
        
        <a href="suikervrij.html"></a>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 3-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/goulash.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
        <h2>Goulash</h2>
<p><br>250 g champignons
<br>25 g ongezouten roomboter
<br>350 g runderreepjes (schaal)
<br>1 el pikante paprikapoeder
<br>295 g gegrilde rode paprika's (potje)
<br>375 g tomato frito (tomatensaus, pakje)</p>
    </div>
  </div>
</div>
    
                          <!--Lactosevrij recept 4-->

<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/kippensoep.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
      <a href="lactosevrij.html"><h2>Kippensoep</h2></a>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 5-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/lactosevrije-chocolade-cake.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
             <a href="suikervrij.html"><h2>Chocolade Cake</h2></a>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 6-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/mexicaanse-burritos.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
            <a href="glutenvrij.html"><h2>Mexicaanse Burritos</h2></a>
    </div>
  </div>
</div>
    

                           <!--Lactosevrij recept 7-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/mexicaanse-taco-salade.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
      <a href="lactosevrij.html"><h2>Mexicaanse Taco Salade</h2></a>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 8-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/rosbief-met-groenten-uit-de-oven.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
             <a href="suikervrij.html"><h2>Rosbief Met Groente</h2></a>
    </div>
  </div>
</div>
                           <!--Lactosevrij recept 9-->
<div class="box">
  <div class="imgbox">
      <img src="images/lactosevrijpage/zalm-teriyaki.jpg" alt=""/>
  </div>
  <div class="details">
    <div class="content">
            <a href="glutenvrij.html"><h2>Zalm Teriyaki</h2></a>
    </div>
  </div>
</div>  
</div>
    
    
    
                           <!--Footer-->    
<div class="footer">
   <div class="icons">
     <a href="facebook.html"><img src="images/social-media-icons/facebook.png" alt=""/></a>
     <a href="googlemaps.html"><img src="images/social-media-icons/google-maps.png" alt=""/></a>
     <a href="gmail.html"><img src="images/social-media-icons/gmail.png" alt=""/></a>
   </div>
</div>
</div>  
    

    
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap-4.3.1.js"></script>
</body>
</html>

html css hover
1个回答
0
投票

据我了解，您的问题是，当将鼠标悬停在网格中的每个“框”上时，动画框会变得太窄。我相信将 

width: 100%;
添加到 
.container .box .details .content
元素应该可以解决这个问题，希望如此。

如果您正在学习，您也可以借此机会熟悉CSS Grid 属性。祝你好运！

OP评论后续回复：

在我看来，您需要了解有关盒模型的更多信息，这里有一个很好的资源适合您。 为了更具体地指导您，首先我将使用

* 选择器

 将以下属性添加到项目中的所有元素，如下所示：
* { box-sizing: border-box; }，只是为了让您的生活更轻松。
在 
.details
 
 和 
 .content 元素上，删除所有绝对定位和 
top
/
right
/
bottom
/
left
 属性以及任何 
transform: translate
。请注意，如果您愿意，这也可能是您检测任何不必要的元素并清理代码的好机会。
现在，在 
.container .box
 元素上，将 
height
 属性更改为 
min-height
 属性。这样，如果内容更多，容器的高度也会随之增加。
注意：这可能会让你的网格看起来不像以前那么统一，为此我建议你使用你的 flex 属性，或者更好的是，我在最初的答案中为你链接的 CSS 网格参考.

    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.