Question

我有一个图片库，其中包含一些我希望改进的悬停影响。当用户在图像上悬停时，图库中的其他图片会变暗。但我也想在悬停时从左侧滑入一些文字。像这个网站有http://gugroppo.com/projects。

我的文字显示在悬停状态，但我无法顺利过渡到左边;或者我的叠加效果也很流畅。一切都出现了。这是我的codepen。

＆＃13;

* {@link org.springframework.web.context.WebApplicationContext WebApplicationContext}
 * implementation which accepts annotated classes as input - in particular
 * {@link org.springframework.context.annotation.Configuration @Configuration}-annotated
 * classes, but also plain {@link org.springframework.stereotype.Component @Component}
 * classes and JSR-330 compliant classes using {@code javax.inject} annotations. Allows
 * for registering classes one by one (specifying class names as config location) as well
 * as for classpath scanning (specifying base packages as config location).

＆＃13;

window.sr = ScrollReveal({reset: true});
sr.reveal('img', {mobile:true});

＆＃13;

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
  font-family: 'Lato', sans-serif;
}

.gallery{
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    width: 33.33%;
  float: left;
  display: block;
  position: relative;
}

.img-container img{
  display: block;
  width: 100%;
  height: auto;
}

#slide {
  position: absolute;
  left: -100px;
  transition: 1s;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
/*   background: rgba(123, 190, 154, 0.72); */
  background: rgba(51,51,51, 0.2);
  
}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif;
  
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

.img-container:hover .overlay {
  opacity: 1;
}

@media(max-width:768px){
  .img-container {
    width: 100% !important;
  }
}

＆＃13;

Answer 1

您要做的是添加溢出：隐藏到您的容器

.img-container{overflow: hidden;}

然后最初从元素开始文本。我是通过设置

来做到这一点的

.text{left: -50%;}

最后，您需要使用容器在悬停时将文本调回元素：悬停并将文本设置回50％;

.img-container:hover .text{left: 50%;}

最后，您只需要添加一些过渡属性和属性。希望这会有所帮助。

以下CSS应该可以实现您的目标

body {
  margin: 0;
  padding: 0;
}

h2 {
  padding-bottom: 7.5%;
  color: #7bbe9a;
  text-align: center;
  font-size: 1.875em;
  font-family: 'Lato', sans-serif;
}

.gallery{
  width: 100%;
  display: inline-block;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 7.5%;
  padding-bottom: 15%;
  background-color: #333;
}

.img-container {
    -webkit-transition: opacity 0.3s;
    -moz-transition: opacity 0.3s;
    -ms-transition: opacity 0.3s;
    -o-transition: opacity 0.3s;
    transition: opacity 0.3s;
    width: 33.33%;
  float: left;
  display: block;
  position: relative;
  overflow: hidden;
}

.img-container img{
  display: block;
  width: 100%;
  height: auto;
}

#slide {
  position: absolute;
  left: -100px;
  transition: 1s;
  width: 100%;
  height: 100%;
}

.overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
/*   background: rgba(123, 190, 154, 0.72); */
  background: rgba(51,51,51, 0.2);

}

.text {
  color: white;
  position: absolute;
  top: 50%;
  left: -50%;
  font-size: 24px;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Lato', sans-serif; 
}

.img-container:hover .text {
    left: 50%;
}

#parent:hover > .img-container:not(:hover) {
    opacity: 0.3;
}

.img-container:hover .overlay {
  opacity: 1;
}

@media(max-width:768px){
  .img-container {
    width: 100% !important;

  }
}

左转换中悬停幻灯片上的文本

1 个答案: