Adding Image Styling Using Clip-path Attribute
Custom Post Type – Taxonomy Reverse Order
January 14, 2022Image Hover Effects
April 24, 2022
Clip-path attribute basically hides all the content outside the shape while only displaying whats inside it.
Just as how a background-image sticks to the bottom most layer of an HTML, same way a Clip-path sticks to the top most layer of an HTML.
It means that giving a Clip-path to a Section or a Container will affect or hide everything within it.
Clip-path attribute can be used in animation as well
Box-shadow wont work on Clip-path, however for the parent class, Filter attribute can be used. example: filter:drop-shadow (10px 10px 10px black);
ready / customized clip-path shapes can be taken from here www.bennettfeely.com/clippy
HTML
<div class="parent_box"> <div class="shape"></div> </div>
CSS
.parent_box {filter:drop-shadow(2px 4px 6px black);}
.shape {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-image: url(your image here.jpg);
height: 450px; /* to be added if BG image used */
width: 450px; /* to be added if BG image used */
background-size: cover; /* to be added if BG image used */
background-position: center; /* to be added if BG image used */
/* To be added if animation needed */
animation-name: shape_ani;
animation-iteration-count: infinite;
animation-duration: 5s;
}
/* To be added if animation needed */
@keyframes shape_ani {
0% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-image: url(your image here.jpg;
}
25% {
clip-path: polygon(100% 50%, 50% 100%, 0% 50%, 50% 0%);
background-image: url(your image here.jpg);
}
50% {
clip-path: polygon(50% 100%, 0 50%, 50% 0, 100% 50%);
background-image: url(your image here.jpg);
}
75% {
clip-path: polygon(0 50%, 50% 0, 100% 50%, 50% 100%);
background-image: url(your image here.jpg);
}
100% {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
background-image: url(your image here.jpg);
}
}
/* Mobile Version */
@media only screen and (max-width: 767px) {
.shape {height: 300px; width: 100%;}
}
