diff --git a/100_projects/23-clip-path-image-hover-effects/img/01.jpg b/100_projects/23-clip-path-image-hover-effects/img/01.jpg
new file mode 100644
index 0000000..9992fb0
Binary files /dev/null and b/100_projects/23-clip-path-image-hover-effects/img/01.jpg differ
diff --git a/100_projects/23-clip-path-image-hover-effects/img/02.jpg b/100_projects/23-clip-path-image-hover-effects/img/02.jpg
new file mode 100644
index 0000000..1f52956
Binary files /dev/null and b/100_projects/23-clip-path-image-hover-effects/img/02.jpg differ
diff --git a/100_projects/23-clip-path-image-hover-effects/index.html b/100_projects/23-clip-path-image-hover-effects/index.html
new file mode 100644
index 0000000..9a52fcd
--- /dev/null
+++ b/100_projects/23-clip-path-image-hover-effects/index.html
@@ -0,0 +1,16 @@
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
\ No newline at end of file
diff --git a/100_projects/23-clip-path-image-hover-effects/style.css b/100_projects/23-clip-path-image-hover-effects/style.css
new file mode 100644
index 0000000..da7f54c
--- /dev/null
+++ b/100_projects/23-clip-path-image-hover-effects/style.css
@@ -0,0 +1,40 @@
+*{
+ margin:0;
+ padding:0;
+ box-sizing: border-box;
+}
+body{
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ min-height: 100vh;
+ background: #111;
+}
+.container{
+ position: relative;
+ width:550px;
+ height: 400px;
+ border: 4px solid #fff;
+}
+.container .box{
+ position: absolute;
+ width: 100%;
+ height: 100%;
+
+}
+.container .box:nth-child(1){
+ background: url(img/01.jpg);
+ transition: .5s;
+}
+.container .box:nth-child(2){
+ background: url(img/02.jpg);
+ z-index: 2;
+ transition: .5s;
+ clip-path: polygon(0 0, 100% 0, 100% 0%, 0% 100%);
+}
+.container .box:nth-child(2):hover{
+ clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
+}
+.container .box:nth-child(1):hover ~ .box:nth-child(2){
+ clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
+}
\ No newline at end of file