html - 如何在图像上写文字。

Question

如何在图像中添加文本...以便仅当鼠标放在图像上时图像变暗时才能查看文本...类似于...下面示例图像中给出的... 感谢您的帮助。

.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