Question

当我将鼠标悬停在文本上时，我想更改其边框填充。实际上，我有一个图像，该图像本身具有悬停，并且悬停在图像上应用了紫色滤镜并显示了文本，但是我希望文本的边界从图像的底部和顶部开始，然后固定在某个空间上

我希望文本（h3标签）的边框从屏幕的顶部和底部发出动画，然后固定在特定位置

#portfolio {
  font-size: 24px;
}

#portfolio .col-md-4,
.col-sm-6 .col-xs-12 {
  padding: 0px;
}

#portfolio h3 {
  font-weight: 300;
}

.portfolio-thumb,
.portfolio-overlay {
  max-width: 390px;
  height: 270px;
  background-size: cover;
  text-align: center;
}

#portfolio .portfolio-thumb img {
  width: 100%;
  height: 100%;
}

#portfolio .portfolio-thumb {
  overflow: hidden;
  z-index: 1;
}

#portfolio .portfolio-thumb .portfolio-overlay {
  opacity: 0;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  position: absolute;
  background: rgba(135, 63, 181, .6);
  padding: 20px 10px 20px 20px;
  margin-left: auto;
  margin-right: auto;
}

#portfolio .portfolio-thumb:hover .portfolio-overlay {
  opacity: 1;
  cursor: pointer;
}

#portfolio .portfolio-thumb .portfolio-overlay h3 {
  color: #ffffff;
  font-family: 'lato';
  font-weight: 300;
  border-top: 1px solid;
  border-bottom: 1px solid;
  display: inline-block;
  padding: 10px;
  position: relative;
  transform: translate(0%, 150%);
}

#portfolio .portfolio-thumb .portfolio-overlay a {
  color: #ffffff;
  font-size: 24px;
  position: absolute;
  bottom: 20px;
  right: 20px;
}

<div class="portfolio-thumb">
  <img src="/thesetup/images/portfolio1.jpg" class="img-responsive wow fadeIn" data-wow-delay="1s" alt="image not available">
  <div class="portfolio-overlay">
    <h3 class="text-capitalize"> the girl</h3>
    <a href="/thesetup/images/portfolio1.jpg" data-lightbox="lightBox">
      <i class="fa fa-search"></i>
    </a>
  </div>
</div>

Answer 1

如@Rory所述，您需要添加CSS以获得完整的答案，但是以下内容应会有所帮助。

当鼠标悬停在div框上时，可以使用img:hover{}来更改其格式。

例如，以下CSS：

.single-service img:hover{
  opacity: 0.5;
  filter: alpha(opacity=50)
}

将更改以下div容器格式：

<div class="single-service">
    <a href="Work History.html"> 
      <img src="Work History.png"/>
    </a>
    <p>
      Work History
    </p>
</div>

使用提供的css进行编辑：

#portfolio .portfolio-thumb .portfolio-overlay h3 { //these are the original "non-hover" instructions
  color: #ffffff;
  font-family: 'lato';
  font-weight: 300;
  border-top: 1px solid;
  border-bottom: 1px solid;
  display: inline-block;
  padding: 10px;
  position: relative;
  transform: translate(0%, 150%);
}

.portfolio-thumb .portfolio-overlay h3:hover{ //these are the new "when you hover instructions
  border-top: 50px solid;
  border-bottom: 50px solid;
}

更改悬停时文本的边框填充

1 个答案: