Затемнить изображение и поместить полуволну на зависание.

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>