Added Soft edges to to the competition card images (#12)

* Some Changes * added soft edges to the competition card images
acf-sack · Jun 29, 2024 · 005ce1b · 005ce1b
1 parent aee8857
commit 005ce1b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/assets/style/style.css b/assets/style/style.css
@@ -338,14 +338,33 @@ height: auto;
     font-optical-sizing: auto;
     font-style: normal;
 }
+
+.competition-card .card-img-div {
+    position: relative;
+}
+
+.competition-card .card-img-div .card-img{
+    display: block;
+    width: 100%;
+}
+
+.competition-card .card-img-div .image-overlay {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background: linear-gradient(180deg, transparent -20%, #131B27 90%);
+    pointer-events: none; /* Ensure the overlay does not interfere with other elements */
+}
 .card-img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  margin-bottom: 20px;
 scale: 1.0;
-
 }
+
 #competitions .card:hover{
     scale: 1.04;
     transition: 0.5s;

diff --git a/competitions.html b/competitions.html
@@ -28,6 +28,7 @@ <h1 class="competition-title"  data-aos="zoom-in" data-aos-once="true">
         <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/web-design.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -54,6 +55,7 @@ <h3>Web Design</h3>
         <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/photo-mani.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -80,6 +82,7 @@ <h3>Photo Manipulation</h3>
         <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/poster-design.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -106,6 +109,7 @@ <h3>Poster Design</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/logo-design.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -132,6 +136,7 @@ <h3>Logo Design</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/presentation.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -158,6 +163,7 @@ <h3>Presentation</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/3d.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -184,6 +190,7 @@ <h3>3D Design</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/video.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -210,6 +217,7 @@ <h3>Video Editing</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/game-dev.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -236,6 +244,7 @@ <h3>Game Development</h3>
          <div class="card competition-card col-9 col-lg-3"  data-aos="zoom-in" data-aos-once="true">
             <div class="card-img-div">
                 <img src="./assets/img/quiz.jpg" alt="" class="card-img" >
+                <div class="image-overlay"></div>
             </div>
             <div class="card-titile">
                 <center>
@@ -282,7 +291,6 @@ <h6 style="opacity: 50%;">(INTER-SCHOOL ONLY)</h6>
     AOS.init();
   </script>
   <script type="text/javascript" src="assets/js/vanilla-tilt.js"></script>
-
    <script src="assets/js/script.js"></script>
    <script type="text/javascript" src="assets/js/particles.js"></script>
     <script type="text/javascript" src="assets/js/app.js"></script>