在没有隐藏文本的情况下悬停缩放图像

时间：2017-07-23 16:16:00

标签： jquery css html5 twitter-bootstrap

我将此图像显示在带有一些文字的框内，我想在框上悬停缩放图像，但是当我这样做时，所有文本都会消失。 我只想缩小图像而不隐藏文本

.jasgrid
{
    padding:0;
}

.box-item 
{
    float: left;
    opacity: 1;
    overflow: hidden;
    position: relative;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
  padding: 0;
}
.item {
  
  overflow: hidden;
  width: 100%;
}
.item img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.box-item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.box-item img 
{
    width: 100%;

}

.box-item a,span
{
    color:#FFF;
}

.box-item .box-post span.meta 
{
    font-family:  sans-serif;
    font-size: 12px;
    color: #fff;
}

.box-item .box-post span.meta span 
{
    margin-right: 15px;
}

.box-item .box-post 
{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.box-item .box-post h1..post-title 
{
   font-size:10pt;
}

.post-title
{
    font-family:  sans-serif;
    font-size: 12px;
    color: #fff;
    margin-top: 15px;
    display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">

      <div class="col-md-3 col-sm-12 jasgrid">
          <div class="box-item">
              <div class="box-post">
                  <span class="label label-success">
                      <a href="#" rel="tag">Bourses</a>
                  </span>
                  <span class="post-title">
                      <a href="#">
                          City in the sky: world's biggest hotel to open in Mecca
                      </a>
                  </span>
                  <span class="meta">
                      <span><i class="glyphicon glyphicon-time"></i> &nbsp; <b> Publie le </b> Sep 15, 2015</span>
                  </span>
              </div>
              <div class="item">
                  <img src="https://lh3.googleusercontent.com/proxy/wlMDMjsgbCnzkPdw2QXd0C2pa5g9M4ofS5b5bJ3_pZjzvjgFIjSu6N-OGYgvGZNZsF1TfeSrd8ijElfHRp14mHHGTDbQTjM=w530-h298-p" class="box-img">
              </div>
          </div>
          </div>
<div class="col-md-3 col-sm-12 jasgrid">
          <div class="box-item">
              <div class="box-post">
                  <span class="label label-success">
                      <a href="#" rel="tag">Concours</a>
                  </span>
                  <h1 class="post-title">
                      <a href="#">
                          Why Palladio is the world's favourite 16th-century architect
                      </a>
                  </h1>
                  <span class="meta">
                      <span><i class="glyphicon glyphicon-time"></i><b>&nbsp; Publie le </b> Sep 15, 2015</span>
                  </span>
              </div>
              <img src="https://lh3.googleusercontent.com/proxy/wlMDMjsgbCnzkPdw2QXd0C2pa5g9M4ofS5b5bJ3_pZjzvjgFIjSu6N-OGYgvGZNZsF1TfeSrd8ijElfHRp14mHHGTDbQTjM=w530-h298-p" alt="Why Palladio is the world's favourite 16th-century architect" 
              class="box-img">        
          </div>

</div>
  </div>
</div>

1 个答案:

答案 0 :(得分：1)

您只需将z-index：2添加到.box-item .box-post

即可 

.jasgrid
{
    padding:0;
}

.box-item 
{
    float: left;
    opacity: 1;
    overflow: hidden;
    position: relative;
    
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
  padding: 0;
}
.item {
  
  overflow: hidden;
  width: 100%;
}
.item img {
  max-width: 100%;
  
  -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.box-item:hover img {
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}
.box-item img 
{
    width: 100%;

}

.box-item a,span
{
    color:#FFF;
}

.box-item .box-post span.meta 
{
    font-family:  sans-serif;
    font-size: 12px;
    color: #fff;
}

.box-item .box-post span.meta span 
{
    margin-right: 15px;
}

.box-item .box-post 
{
    position: absolute;
    z-index:2 ;
    left: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 30px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.box-item .box-post h1..post-title 
{
   font-size:10pt;
}

.post-title
{
    font-family:  sans-serif;
    font-size: 12px;
    color: #fff;
    margin-top: 15px;
    display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container">
  <div class="row">

      <div class="col-md-3 col-sm-12 jasgrid">
          <div class="box-item">
              <div class="box-post">
                  <span class="label label-success">
                      <a href="#" rel="tag">Bourses</a>
                  </span>
                  <span class="post-title">
                      <a href="#">
                          City in the sky: world's biggest hotel to open in Mecca
                      </a>
                  </span>
                  <span class="meta">
                      <span><i class="glyphicon glyphicon-time"></i> &nbsp; <b> Publie le </b> Sep 15, 2015</span>
                  </span>
              </div>
              <div class="item">
                  <img src="https://lh3.googleusercontent.com/proxy/wlMDMjsgbCnzkPdw2QXd0C2pa5g9M4ofS5b5bJ3_pZjzvjgFIjSu6N-OGYgvGZNZsF1TfeSrd8ijElfHRp14mHHGTDbQTjM=w530-h298-p" class="box-img">
              </div>
          </div>
          </div>
<div class="col-md-3 col-sm-12 jasgrid">
          <div class="box-item">
              <div class="box-post">
                  <span class="label label-success">
                      <a href="#" rel="tag">Concours</a>
                  </span>
                  <h1 class="post-title">
                      <a href="#">
                          Why Palladio is the world's favourite 16th-century architect
                      </a>
                  </h1>
                  <span class="meta">
                      <span><i class="glyphicon glyphicon-time"></i><b>&nbsp; Publie le </b> Sep 15, 2015</span>
                  </span>
              </div>
              <img src="https://lh3.googleusercontent.com/proxy/wlMDMjsgbCnzkPdw2QXd0C2pa5g9M4ofS5b5bJ3_pZjzvjgFIjSu6N-OGYgvGZNZsF1TfeSrd8ijElfHRp14mHHGTDbQTjM=w530-h298-p" alt="Why Palladio is the world's favourite 16th-century architect" 
              class="box-img">        
          </div>

</div>
  </div>
</div>

相关问题
最新问题