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

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>

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

Darken the image and place a half triangle on hover

html

css

css-shapes