悬停应用外部图像

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>

当光标在图像外时，图像悬停运行ouside图像？

由于悬停应用了外部图像边界，我的导航下拉列表也没有运行，因为悬停应用于此soo为此做什么 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>