搜索
搜索

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

Steve 发表于 Dev
31
史蒂夫

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>

塞尔格·切尔纳塔（Serg Chernata）

这是我所能接近的。CSS网格可能是可行的，但浏览器支持尚不存在。

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

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;
}
.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; }
<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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在悬停时扩展div及其内容？

如何在点击时扩展div

如何在悬停时扩展菜单上的背景颜色高度

悬停时扩展文字

如何为扩展/收缩而不是向上/向下动画

CSS - 如何在内容垂直扩展时扩展英雄背景 div/图像的大小

向上扩展和向外扩展应用程序服务计划之间的区别

AWS向外扩展

HighCharts导航器：如何在悬停时禁用扩展宽度图标

div 由于边框而在悬停时扩展其大小

清除div上两个在悬停时扩展的属性

扩展searchView时如何自定义“向上”按钮？

如何在元素向下滚动的同时向上扩展元素？

悬停时向下扩展按钮

如何在悬停时使div覆盖div？

鼠标悬停时如何阻止主菜单扩展

聊天窗口ScrollView向下扩展而不是向上扩展

如何在单击时扩展块？

如何创建一行三个可扩展/可折叠的div，它们会在悬停时做出反应？

内存上的Azure向外扩展不断波动（不向外扩展）

如何在div悬停时隐藏视频？

使DIV扩展内容而不是滚动

半显示的 div 在悬停时向上滑动

单击时如何在可折叠的div上同时扩展宽度和高度？

HTML / CSS Div在悬停时扩展到父div之外

在悬停时添加边框可扩展元素

悬停时，使用动画扩展按钮

圆形按钮在悬停时随文本扩展

悬停时角度 2 扩展选择

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档