css3 Rautenform mit Hover-Animation

Question

Ich habe CSS3 Rautenform für die folgenden HTML-Code verwendet, aber dies ist nicht für meine Anforderung i Rautenform benötigen und Animation bewegen, überprüfen Sie meinen Code

img.clip { \t 
 
    -webkit-clip-path: polygon(50% 78%, 0 0, 100% 0); \t 
 
    clip-path: polygon(50% 78%, 0 0, 100% 0); 
 
} 
 
    
 
img.tclip { \t 
 
    -webkit-clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%); \t 
 
    clip-path: polygon(100% 100%, 50% 90%, 50% 90%, 0 100%); 
 
}

<a href="#"> 
 
    <img src="https://www.w3schools.com/css/img_fjords.jpg" 
 
    class="tclip"/> 
 
    <img src="https://www.w3schools.com/css/img_fjords.jpg" 
 
    class="clip"/> 
 
</a>

Answer 1

, wenn Sie eine Hover-Animation hinzufügen möchten, können Sie CSS wie diese

#diamond{ 
    transition: 3s all; 
} 
#diamond:hover { 
    opacity: 0.5; //here your second state, on hover 
} 

mit diesem hTML verwenden

<a href="#" id="diamond"> 

oder möchten Sie vielleicht die Animation eines echten Diamanten drehen?