Question

如何在图像中添加TEXT ...这样只有当鼠标放在它上面时图像变暗才能查看TEXT ......就像下面示例图片中给出的那样...... 谢谢你的帮助。

.image {
  width: 250px;
  height: 200px;
  background: black;
  position: relative;
  overflow: hidden;
}
.image img {
  transition: all ease 1s;
}
.image:hover img { /* Darkening effect on mouseover */
  background: black;
  opacity: 0.7;
}
.image .arrow { /* Creates a half triangle with top and left arrow transparent */
  opacity: 0;
  border-color: transparent #f2f2f2 #f2f2f2 transparent;
  transition: all ease 1s;
  position: relative;
}
.image:hover .arrow { /* Mouseover effect */
  opacity: 1;
  font-family: Roboto;
  font-size: 36px;
  text-align: center;
  border-image: none;
  border-style: solid;
  border-width: 45px;
  position: absolute;
  bottom: 0;
  font-weight: normal;
  width: 0;
  height: 0;
  right: 0;
}


.image:hover .arrow {
    border-image: none;
    border-style: solid;
    border-width: 45px;
    bottom: 0;
    display: block;
    font-family: Roboto;
    font-size: 36px;
    font-weight: normal;
    height: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-align: center;
    width: 0;
}
.image .arrow {
    border-color: transparent #f2f2f2 #f2f2f2 transparent;
    opacity: 0;
    position: relative;
    transition: all 1s ease 0s;
}

.image .arrow span {
    left: 5px;
    position: relative;
    top: -10px;
}

<div class="image">
  <img src="http://lorempixel.com/250/200/sports" />
  <div class="arrow"><span>></span></div>
</div>

enter image description here

Answer 1

很简单。在包装器div中创建一些文本，然后在将鼠标悬停在包装器上时显示文本。下面是这个逻辑的演示。

HTML：

<div class="image">
   <p>I'm some very interesting text!</p>
  <div class="arrow"><span>></span></div>
</div>

CSS：

 p{
   color: #fff;
   opacity: 0;
   font-weight: bold;
   text-align: center;
   font-size:32px;
   color: red;
  /* bring your own prefixes */
  transform: translate(0, 50%);
   transition: all .5 ease;
}


.image:hover p {
  visibility: visible;
  opacity: 1;
}

CODEPEN DEMO

Answer 2

我认为你可以这样创造您需要更改.image类的位置，以便文本div可以在该

上重叠

mysql

.image-hover-wrapper {
    display:none;
    text-align: center;
    width: 250px;
    color: red;
    font-size: 35px;
    position: relative;
    top: -125px;
    background: rgba(255,255,255,0.6);
}
.image:hover > .image-hover-wrapper{
   display:block;
   opacity:0.8;    
   transition-property: animation;
   transition-duration: 2s;
   transition-timing-function: linear;   
}

这是的 Updated DEmo

如何在图像上书写文字。

2 个答案: