如何滑动div来填写另一个div？

问题描述 投票：2回答：3

我想制作一个以背景图像上的标题开头的新闻框，但是当用户将鼠标悬停在它上面时，新闻标题和描述会填满背景图像，就像新闻块here一样。

以下是我一起入侵的内容：

$(document).ready(function() {
  $('.thumb-box').hover(function() {
    $(this).find('.news-item').removeClass('only-title')
    $(this).find('.news-item').addClass('title-and-desc');
    $(this).find('.desc-on-image').removeClass('hidden');
  }, function() {
    $(this).find('.news-item').removeClass('title-and-desc');
    $(this).find('.news-item').addClass('only-title');
    $(this).find('.desc-on-image').addClass('hidden');
  });
});
.image-container {
  position: relative;
  text-align: center;
  color: white;
}

.thumb-box {
  width: 300px;
  height: 240px;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.only-title {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
}

.title-and-desc {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
  animation-name: draw-up;
  animation-duration: 1s;
}

@keyframes draw-up {
  from {
    padding: 1em 1em 1em 1em;
  }
  to {
    padding: 1em 1em 8em 1em;
  }
}

.clickable {
  cursor: pointer;
}

.news-title {
  color: black;
}

.news-title a {
  color: black;
}

.news-title a:hover {
  color: black;
  text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="thumb-box img-responsive" style="background-image: url(/path/to/photo">
  <div class="news-item only-title">
    <a class="news-title" href="/article/{{$a.Slug}}">
      <h4><strong> {{$a.Title}} </strong> </h4>
      <div class="desc-on-image hidden">
        {{$a.Teaser}} ...
      </div>
    </a>
  </div>
</div>

问题有两个方面：

  1. 这有点紧张。当鼠标从某个角度进入它们时，盒子跳了一下。
  2. 重叠的div一滑起就会跳下来。

我想知道如何解决这些问题，或者如何使用更强大的解决方案来执行相同的功能？

jquery html css animation
3个回答
1
投票

纯css解决方案

.news-container{
  overflow: hidden;
  padding: 10px;
}

.news-item{
  position: relative;
  width: 220px;
  height: 240px;
  float: left;
  background-size: cover;
  overflow: hidden;
  margin: 10px;
}

.news-item:after{
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: #fff;
  z-index: 0;
  opacity: 0;
  transition: 0.7s;
}

.news-item > img{
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.news-description{
  position: absolute;
  width: 100%;
  height: 100%;
  top: -60px; /* this sets the visible part's height */
  margin-top: 100%;
  z-index: 1;
  transition: 0.3s;
  background: rgba(255,255,255,0.8);
}

.news-description h5{
  display: block;
  height: 80px; /* this is the hight of the title */
  overflow: hidden;
  padding: 10px;
  margin: 0;
  font-weight: bold;
}

.news-description p{
  padding: 10px;
  font-size: 14px;
}

.news-item:hover .news-description{
  top: 0;
  margin-top: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="news-container">

  <div class="news-item" style="background-image: url(https://picsum.photos/200/360/?random)">
    <div class="news-description">
      <h5>News One</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
  
  <div class="news-item" style="background-image: url(https://picsum.photos/200/400/?random)">
    <div class="news-description">
      <h5>News Two With A Slightly Longer Title</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
  
  <div class="news-item">
    <img src="https://picsum.photos/220/400/?random)" alt="" />
    <div class="news-description">
      <h5>News Item With img Tag</h5>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer iaculis laoreet sapien ac auctor.</p>
    </div>
  </div>
</div>

EDIT

将图像添加到.news-item作为内联css样式。在样式表中还为background-size: cover;添加了.news-item。

在img中添加了.news-item标记，并添加了相应的css规则作为添加图像的另一种方式。

4
投票

Relative positioning，overflow: hidden，Absolute Positioning和transition

这可以在不使用javascript或Jquery的情况下实现。

外部的container被给予position: relative和overflow: hidden。

因此，无论是在container内部，并且比container更宽或更高，或者可能相对地放置在container之外，那么它已经溢出container并保持隐藏。

现在，我们使用position: absolute放置slider绝对距离top，即100px。所以，现在它溢出了它的父div container。但它被隐藏，因为overflow: hidden在其父div container。

现在，使用css child combinator，每当父div container徘徊时，我们使用slider向上滑动transition。

.container{
  position:relative;
  background-image:url(https://picsum.photos/400);
  height:200px;
  width:300px;
  cursor:pointer;
  overflow:hidden;
}
.slider{
  position:absolute;
  top:100px;
  width:100%;
  height:200px;
  background:rgba(255,255,255,0.7);
  transition: top 1s;
}
.container:hover > .slider{
  top:0;
}
<div class='container'>
  <div class='slider'>
    <h1>I will Slide</h1>
    <p>My content</p>
    <p>My content</p>
    <p>My content</p>
  </div>
</div>
2
投票

您可以通过简单地使用CSS转换来简化代码。

下面是一个示例，您可以轻松调整CSS属性以获得所需的效果。

.image-container {
  position: relative;
  text-align: center;
  color: white;
}

.thumb-box {
  width: 300px;
  height: 200px;
  background-size: cover;
  background-repeat: no-repeat;
  position:relative;
  overflow:hidden;
}

.only-title {
  color: black;
  background: rgba(255, 255, 255, .9);
  margin: 0;
  padding: 1em 1em 1em 1em;
  cursor: pointer;
  position:absolute;
  transition:1s;
  top:60%;
  height:100%;
  left:0;
  right:0;
}
.thumb-box:hover .only-title {
  top:0;
}
<div class="thumb-box img-responsive" style="background-image: url(https://lorempixel.com/400/200/)">
  <div class="news-item only-title">
    <a class="news-title" href="#">
      <h4><strong> title</strong> </h4>
      <div class="desc-on-image hidden">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ornare placerat placerat. Sed id nulla odio. Morbi lacinia ultrices velit, faucibus commodo torto
      </div>
    </a>
  </div>
</div>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.