如何在悬停时向上扩展div，而不是向下扩展div

Question

https://codepen.io/SteveGWR/pen/Rjawoa

正如你所看到的，前两排猫在悬停时向外扩展，向外宽度向下扩展 - 这很好。

但是我的底行我试图向上扩展这些div以重叠上面的行。而不是在那里坚持下去。

这就是将所有内容保留在容器空间内的所有效果。

jQuery("li").mouseover(function(){
    jQuery(this).addClass("overlay-in");
});
jQuery("li").mouseleave(function(){
    jQuery(this).removeClass("overlay-in");
});

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}

.grid-list{
  width:100%;
  float:left;
}

.grid-list-btm{
  width:100%;
  float:left;
}

.grid-list li{
  width:25%;
  float:left;
  position:relative;
  height:200px;
}

.grid-list-btm li{
  width:25%;
  float:left;
  position:relative;
  height:200px;
}

.grid-list li .dark-cover{ 
  display:none; 
  position:absolute; 
  background:rgba(0,0,0,0.7); 
  width:100%; 
  height:100%; 
  left:0px; 
  top:0px;  
}

.grid-list-btm li .dark-cover{ 
  display:none; 
  position:absolute; 
  background:rgba(0,0,0,0.7); 
  width:100%; 
  height:100%; 
  left:0px; 
  top:0px;  
}

.container:hover .dark-cover{ 
  display:block;
}

.container {
  position: relative;
  left: 50%;
  margin-left: -475px;
  /*    background: #FF4346;*/
  max-width: 950px;
  width: 100%;
  top: 20px;
  height: 748px;
}

.grid-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 190px;
}
.grid-list li {
  position:relative;
  height:100%;
}

.grid-list-btm {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 190px;
}
.grid-list-btm li {
  position:relative;
  height:100%;
}

.destination-copy {
  display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  bottom:0px;
  width:100%;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;
}

.cta-bath {
  display: none;
  opacity: 0;
  transition: 1s all;
  position: absolute;
  bottom: 80px;
  right: 110px;
  background: #FFFFFF;
  border: 2px solid #013A04;
  border-radius: 3px;
  color: #0a493e;
  padding: 6px 15px 6px 15px;
  /* line-height: normal; */
  font-size: 13px;
  font-weight: bold;
  font-family: arial;
}

.promo-content {
  display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  top:40px;
  width:300px;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;
}

.promo-content h3 { 
  color:#fff;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
}

.grid-list li:hover .destination-copy {
  animation: 1s ease 0s normal forwards 1 fadein;
  display:block;
}

.grid-list li:hover .cta-bath {
  animation: 1.7s ease 0s normal forwards 1 fadein;
  display:block;
}

.grid-list li:hover .promo-content {
  animation: 2.7s ease 0s normal forwards 1 fadein;
  display:block;
}

@keyframes fadein{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:1; }
}

.grid-list li {
  transition: width 0.5s, height 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 25%; /*CHANGE*/

  /* min-width: 237px; */
  /* margin: 1em; */
  /* flex-wrap: wrap; */
  list-style: none;
}

.grid-list-btm li {
  transition: height 0.5s;
  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 237.5px;
  height: 190px;
  /* min-width: 237px; */
  /* margin: 1em; */
  /* flex-wrap: wrap; */
  list-style: none;
}

.grid-list li:hover {
  width:75%;
  height:200%;
  z-index: 10;
}

.grid-list-btm li:hover {
  height:380px;
  z-index: 10;
}

.destination-title {
  position:absolute;
  bottom:80px;
  right:0px;
  background-color:#054940;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  padding:6px;
  width: 100px;
  text-align: center;
}

/* Background images */
.bath {
  background-image:url(http://placekitten.com/600/350);  
}
.bath:hover {
  background-image: url(http://placekitten.com/600/350);
}

.bristol {
  background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
  background-image: url(http://placekitten.com/600/355);
}

.cardiff {
  background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
  background-image:url(http://placekitten.com/600/356);
}

.cornwall {
  background-image:url(http://placekitten.com/600/357);

}
.cornwall:hover {
  background-image:url(http://placekitten.com/600/357);
}

.dorset {
  background-image:url(http://placekitten.com/600/359);
}
.dorset:hover {
  background-image:url(http://placekitten.com/600/359);
}

.Cotswolds {
  background-image:url(http://placekitten.com/600/365);
}

.Cotswolds:hover {
  background-image:url(http://placekitten.com/600/365);
}

.Exeter {
  background-image:url(http://placekitten.com/600/366);
}
.Exeter:hover {
  background-image:url(http://placekitten.com/600/366);
}

.London {
  background-image:url(http://placekitten.com/600/367);
}

.London:hover {
  background-image:url(http://placekitten.com/600/367);
}

.Oxford {
background-image:url(http://placekitten.com/600/368);

}
.Oxford:hover {
  background-image:url(http://placekitten.com/600/368);
}

.Plymouth {
  background-image:url(http://placekitten.com/600/371);
}
.Plymouth:hover {
  background-image:url(http://placekitten.com/600/371);
}
.Scilly {
  background-image:url(http://placekitten.com/600/374);
}
.Scilly:hover {
  background-image:url(http://placekitten.com/600/374);
}

.Cotswolds2 {
  background-image:url(http://placekitten.com/600/349);
}
.Cotswolds2:hover {
  background-image:url(http://placekitten.com/600/349);
}
.overlay-in .dark-cover{ display:none!important; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <ul class="grid-list">
        <li class="bath">
            <div class="destination-title">Bath</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="bristol">
            <div class="destination-title">Bristol</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="cardiff">
            <div class="destination-title">Cardiff</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="cornwall">
            <div class="destination-title">Cornwall</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
    <!-- row 2 -->
    <ul class="grid-list">
        <li class="dorset">
            <div class="destination-title">Dorset</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Cotswolds">
            <div class="destination-title">Cotswolds</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Exeter">
            <div class="destination-title">Exeter</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="London">
            <div class="destination-title">London</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
    <!-- row 3 -->
    <ul class="grid-list-btm">
        <li class="Oxford">
            <div class="destination-title">Oxford</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Oxford ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Plymouth">
            <div class="destination-title">Plymouth</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Plymouth ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Scilly">
            <div class="destination-title">Scilly</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Scilly ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Cotswolds2">
            <div class="destination-title">Cotswolds</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
</div>

Answer 1

这是我能得到的尽可能接近。这可能是css grids所能实现的，但浏览器支持还不是很好。

基本上，您必须通过absolute属性手动定位底行项目。但是，这会将它们从DOM流程中分离出来，您将不再获得手风琴效果。

＆＃13;

＆＃13;

jQuery("li").mouseover(function(){
    jQuery(this).addClass("overlay-in");
});
jQuery("li").mouseleave(function(){
    jQuery(this).removeClass("overlay-in");
});

＆＃13;

* {
  margin:0px;
  padding:0px;
  box-sizing:border-box;
}

.grid-list{
  width:100%;
  float:left;
}

.grid-list-btm{
  width:100%;
  float:left;
}

.grid-list li{
  width:25%;
  float:left;
  position:relative;
  height:200px;
}

.grid-list-btm li{
  width:25%;
  float:left;
  position:relative;
  height:200px;
}

.grid-list li .dark-cover{ 
  display:none; 
  position:absolute; 
  background:rgba(0,0,0,0.7); 
  width:100%; 
  height:100%; 
  left:0px; 
  top:0px;  
}

.grid-list-btm li .dark-cover{ 
  display:none; 
  position:absolute; 
  background:rgba(0,0,0,0.7); 
  width:100%; 
  height:100%; 
  left:0px; 
  top:0px;  
}

.container:hover .dark-cover{ 
  display:block;
}

.container {
  position: relative;
  left: 50%;
  margin-left: -475px;
  /*    background: #FF4346;*/
  max-width: 950px;
  width: 100%;
  top: 20px;
  height: 748px;
}

.grid-list {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 190px;
}
.grid-list li {
  position:relative;
  height:100%;
}

.grid-list-btm {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  height: 190px;
}
.container .grid-list-btm li {
  position:absolute;
  bottom: 190px;
  width: 25%;
  /*height:100%;*/
}
/* manually position bottom row items */
.grid-list-btm li:nth-child(1) {
  left: 0;
}
.grid-list-btm li:nth-child(2) {
  left: 25%;
}
.grid-list-btm li:nth-child(3) {
  left: 50%;
}
.grid-list-btm li:nth-child(4) {
  right: 0;
}

.destination-copy {
  display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  bottom:0px;
  width:100%;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;
}

.cta-bath {
  display: none;
  opacity: 0;
  transition: 1s all;
  position: absolute;
  bottom: 80px;
  right: 110px;
  background: #FFFFFF;
  border: 2px solid #013A04;
  border-radius: 3px;
  color: #0a493e;
  padding: 6px 15px 6px 15px;
  /* line-height: normal; */
  font-size: 13px;
  font-weight: bold;
  font-family: arial;
}

.promo-content {
  display:none;
  opacity:0;
  transition:1s all;
  position:absolute;
  top:40px;
  width:300px;
  background:rgba(0,0,0,0.7);
  color:#fff;
  padding:12px;
  font-size: 13px;
  font-family: arial;
}

.promo-content h3 { 
  color:#fff;
  font-size: 16px;
  font-weight: bold;
  font-family: arial;
}

.grid-list li:hover .destination-copy {
  animation: 1s ease 0s normal forwards 1 fadein;
  display:block;
}

.grid-list li:hover .cta-bath {
  animation: 1.7s ease 0s normal forwards 1 fadein;
  display:block;
}

.grid-list li:hover .promo-content {
  animation: 2.7s ease 0s normal forwards 1 fadein;
  display:block;
}

@keyframes fadein{
  0% { opacity:0; }
  66% { opacity:0; }
  100% { opacity:1; }
}

.grid-list li {
  transition: width 0.5s, height 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 25%; /*CHANGE*/

  /* min-width: 237px; */
  /* margin: 1em; */
  /* flex-wrap: wrap; */
  list-style: none;
}

.grid-list-btm li {
  transition: height 0.5s;
  -moz-transition: height 0.5s;
  -webkit-transition: height 0.5s;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 237.5px;
  height: 190px;
  /* min-width: 237px; */
  /* margin: 1em; */
  /* flex-wrap: wrap; */
  list-style: none;
}

.grid-list li:hover {
  width:75%;
  height:200%;
  z-index: 10;
}

.grid-list-btm li:hover {
  height:380px;
  z-index: 10;
}

.destination-title {
  position:absolute;
  bottom:80px;
  right:0px;
  background-color:#054940;
  color:#fff;
  font-size:16px;
  font-weight: bold;
  padding:6px;
  width: 100px;
  text-align: center;
}

/* Background images */
.bath {
  background-image:url(http://placekitten.com/600/350);  
}
.bath:hover {
  background-image: url(http://placekitten.com/600/350);
}

.bristol {
  background-image: url(http://placekitten.com/600/355);
}
.bristol:hover {
  background-image: url(http://placekitten.com/600/355);
}

.cardiff {
  background-image:url(http://placekitten.com/600/356);
}
.cardiff:hover {
  background-image:url(http://placekitten.com/600/356);
}

.cornwall {
  background-image:url(http://placekitten.com/600/357);

}
.cornwall:hover {
  background-image:url(http://placekitten.com/600/357);
}

.dorset {
  background-image:url(http://placekitten.com/600/359);
}
.dorset:hover {
  background-image:url(http://placekitten.com/600/359);
}

.Cotswolds {
  background-image:url(http://placekitten.com/600/365);
}

.Cotswolds:hover {
  background-image:url(http://placekitten.com/600/365);
}

.Exeter {
  background-image:url(http://placekitten.com/600/366);
}
.Exeter:hover {
  background-image:url(http://placekitten.com/600/366);
}

.London {
  background-image:url(http://placekitten.com/600/367);
}

.London:hover {
  background-image:url(http://placekitten.com/600/367);
}

.Oxford {
background-image:url(http://placekitten.com/600/368);

}
.Oxford:hover {
  background-image:url(http://placekitten.com/600/368);
}

.Plymouth {
  background-image:url(http://placekitten.com/600/371);
}
.Plymouth:hover {
  background-image:url(http://placekitten.com/600/371);
}
.Scilly {
  background-image:url(http://placekitten.com/600/374);
}
.Scilly:hover {
  background-image:url(http://placekitten.com/600/374);
}

.Cotswolds2 {
  background-image:url(http://placekitten.com/600/349);
}
.Cotswolds2:hover {
  background-image:url(http://placekitten.com/600/349);
}
.overlay-in .dark-cover{ display:none!important; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <ul class="grid-list">
        <li class="bath">
            <div class="destination-title">Bath</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Bath ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="bristol">
            <div class="destination-title">Bristol</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Bristol ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="cardiff">
            <div class="destination-title">Cardiff</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Cardiff ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="cornwall">
            <div class="destination-title">Cornwall</div>
            <div class="dark-cover"></div>
            <a href="#">
                <div class="cta-bath">Click Here</div>
            </a>
            <div class="promo-content">
                <h3>Promo Content</h3>
                <br/>ipsum dolor sit amet, consectetur adipiscing elit.</div>
            <div class="destination-copy"><span>Cornwall ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
    <!-- row 2 -->
    <ul class="grid-list">
        <li class="dorset">
            <div class="destination-title">Dorset</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Dorset ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Cotswolds">
            <div class="destination-title">Cotswolds</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Exeter">
            <div class="destination-title">Exeter</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Exeter ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="London">
            <div class="destination-title">London</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>London ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
    <!-- row 3 -->
    <ul class="grid-list-btm">
        <li class="Oxford">
            <div class="destination-title">Oxford</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Oxford ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Plymouth">
            <div class="destination-title">Plymouth</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Plymouth ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Scilly">
            <div class="destination-title">Scilly</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Scilly ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
        <li class="Cotswolds2">
            <div class="destination-title">Cotswolds</div>
            <div class="dark-cover"></div>
            <div class="destination-copy"><span>Cotswolds ipsum dolor sit amet, consectetur adipiscing elit.</span></div>
        </li>
    </ul>
</div>

＆＃13;

＆＃13;

＆＃13;