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

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>