使图像变暗并在悬停上放置半个三角形

Question

例如：在下图所示的图片中，当有人将鼠标光标放在图像上时，如何获得该切边（箭头指向它）和黑暗视图。

我是编程和学习的新手。如果您能编写示例代码以获得该类型的视图，我将非常感激。

感谢您的帮助。

谢谢。

Answer 1

你也可以使用伪元素方法，但是为了开始而不是混淆，我使用了一个额外的元素，它将是箭头。 评论中的代码说明

要了解箭头的创建方式，您需要先看一下此演示：How CSS triangles work

.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>