html - 悬停应用外部图像

Question

Here image hover not closing outside image Departments dropdown not clickable

.post{
  width: 90%;
  height: 100%;
  position:relative; 
  cursor: pointer;
}
.post:hover .post-s{
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
  width: 90%;
}
.post img{
  display: inline-block;
  height: 100%;
  width: 90%;
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
}
.post-s{
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
   width: 0px;
  height: 100%;
   background-color: rgba(103, 58, 183, 0.71);
   position: absolute;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   transition: 0.7s ease;
}
.post-s p{
  color: white;
  font-family: 'Sofia';
  font-size: 35;
  border: 6px solid white;
  padding: 10px 30px;
}

<div class="post" class="zoomimage">
            <img src="https://gymkhana.iitb.ac.in/~nss/assets/images/EventsBG.png" alt="Eventimg">

            <div class="post-s">
                <p>John DoeEvents tries to make sure that our services to mankind find their destination. The department is very versatile with regard to the kind of activities contributing towards the upliftment of society. Helping the underprivileged by providing them with necessary amenities can be attributed as the cornerstone of what we do. Ranging from welfare of construction workers to spreading awareness about various social problems through blogs and street plays, NSS Events aims to serve the society in the most satisfying ways.</p>
            </div>
        </div>

当光标在图像外时图像悬停在图像外？

由于鼠标悬停在图像边界外应用，我的导航下拉菜单也没有运行，因为鼠标悬停在这上面所以该怎么办 here is image

Answer 1

.post{
  width: 90%;
     height: 70%;
  position:relative; 
  cursor: pointer;
}
.post:hover .post-s{
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
  width: 90%;
  height: 89%;
}
.post img{
  display: inline-block;
  height: 100%;
  width: 90%;
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
}
.post-s{
  margin-top: 7%;
  margin-left: 10%;
  margin-right: 5%;
  border-radius: 20px;
   width: 0px;
  height: 89%;
   background-color: rgba(103, 58, 183, 0.71);
   position: absolute;
   top: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   transition: 0.7s ease;
}
.post-s p{
      margin: 0 1px 0 1px;
  color: white;
  font-family: 'Sofia';
  font-size: 35;
  border: 6px solid white;
  padding: 10px 30px;
}

<div class="post" class="zoomimage">
            <img src="https://gymkhana.iitb.ac.in/~nss/assets/images/EventsBG.png" alt="Eventimg">

            <div class="post-s">
                <p>John DoeEvents tries to make sure that our services to mankind find their destination. The department is very versatile with regard to the kind of activities contributing towards the upliftment of society. Helping the underprivileged by providing them with necessary amenities can be attributed as the cornerstone of what we do. Ranging from welfare of construction workers to spreading awareness about various social problems through blogs and street plays, NSS Events aims to serve the society in the most satisfying ways.</p>
            </div>
        </div>