Question

希望对投资组合的项目部分产生悬停效果。

布局由CSS网格组成，在悬停时，用于查看Live Demo的链接应显示为响应式。动画过渡

尝试过但悬停效果却弄乱了布局。

它必须仅使用css悬停动画，并且没有Java脚本。

悬停效果以显示链接。

@DylanScript提供了解决方案，但工作不顺利。附图片

第二张图像供参考

* {
  box-sizing: border-box;
}

body {
  height: 100%;
  margin: 0;
  line-height: 1.5;
}

a {
  color: #fff;
  text-decoration: none;
}

.projects {
  display: grid;
  grid-gap: 0.7rem;
  grid-template-columns: repeat(3, 1fr);
}

.projects img {
  width: 100%;
  border: 3px #fff solid;
}

.projects img:hover {
  opacity: 0.5;
}

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: -30%;
  transition: .3s ease-in-out;
  background: #413a44;
}

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .6s ease-in-out;
}

.item:hover .infobar {
  bottom: 0%;
}

.viewBar:hover p {
  opacity: 1;
}

.viewBar img {
  position: absolute;
  left: 0;
  bottom: 0%;
  transition: .32s ease-in-out;
}

.viewBar:hover img {
  bottom: 30%;
}

.item:hover {
  transform: scale(1.01);
  filter: grayscale(0.6);
}

@media screen and (min-width: 1171px) {
  .projects {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (min-width: 769px) and (max-width: 1170px) {
  .projects {
    grid-template-columns: repeat(3, 1fr);
  }
}

<nav>

</nav>
<main>
  <div class="projects">
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>
    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>

    <div class="item viewBar">
      <a href="#">
        <img src="https://source.unsplash.com/1600x899/?water">
      </a>
      <div class="infobar">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
          <a href="#" class="btn-light">
                            Demo...
                        </a>
        </p>
      </div>
    </div>


  </div>

</main>

<footer>

</footer>

Answer 1

问题是通过应用U = java.time.LocalTime动画可以正确执行img和.infobar上的<script> $(function(){ $('.nav-tabs a:first').tab('show'); }); </script>：

position: absolute

希望这会有所帮助

Answer 2

您的position和margin-bottom是导致问题的原因。

更新

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  padding: 10px;
  text-align: left;
  width: 100%;
  height: 30%;
  position: relative;
  transition: .3s ease-in-out;
  background: #413a44;
}

.viewBar img {
  position: relative;
  left: 0;
  bottom: 0;
  transition: .32s ease-in-out;
}

删除

.viewBar:hover img {
  bottom: 30%;
}

已更新

将您的.item职位设置为relative

.item{
    position: relative;
}

然后将.infobar定位到absolute。我还更改了height margin-bottom padding以达到您想要的效果

.infobar {
  cursor: default;
  font-size: 0.9rem;
  font-weight: lighter;
  text-align: left;
  width: 100%;
  /* updates */  
  height: 0;
  position: absolute;
  z-index: 1;
  bottom: 0;
  /* end updates */  
  transition: .3s ease-in-out all;
  background: #413a44;
}

然后在.item:hover

.item:hover .infobar {
  height: 30%;
}

将transition上的p持续时间更改为与.3s相同的.infobar，以获得更平滑的效果。

.infobar p {
  opacity: 0;
  margin: 0;
  transition: .3s ease-in-out;
}

希望这会有所帮助。

笔https://codepen.io/crazychukz/pen/VJyOJj

使用CSS网格动画对图像进行CSS悬停

2 个答案: