make images round

collections.php

@@ -8,7 +8,7 @@
     $html = '
       <div class="collection">
         <h1>' . $c["name"] . '</h1>
-
+        <div class="flexbox-col-img">
           <div class="col-img-container">
             <img class="col-image" src="projects_data/img/' . $c['preview_image_url'] . '" alt="example image for ' . $c['name'] .'">
             <div class="col-img-desc">
@@ -22,6 +22,7 @@
             ' . $c['collection_description'] . '
           </div>
         </div>
+      </div>
     ';
     print($html);
     $index += 1;

css/projects.css

@@ -54,8 +54,6 @@ div.collection_container {
 }
 
 div.collection {
-    background-color: #1f1f1f;
-    border: #444 2px solid;
     margin: 4px;
 }
 
@@ -82,6 +80,7 @@ div.collection h1 {
 }
 
 div.collection div.col-desc {
+    display: none;
     padding: 10px;
     text-align: justify;
 }
@@ -92,14 +91,23 @@ section.cta h2 {
 
 /* Slide in stuff */
 
+.flexbox-col-img {
+    display: flex;
+    justify-content: center;
+}
+
 .col-img-container {
   position: relative;
+  width: 350px;
+  height: 350px;
 }
 
 .col-image {
     display: block;
-    width: 100%;
-    height: auto;
+    width: 350px;
+    height: 350px;
+    border-radius: 50%;
+    box-shadow: 0px 0px 15px 4px #9c8e8e;
 }
   
 .col-img-desc {
@@ -109,13 +117,15 @@ section.cta h2 {
     right: 0;
     background-color: rgba(51, 51, 51, 0.4);
     overflow: hidden;
-    width: 100%;
-    height: 0;
+    width: 350px;
+    height: 350px;
+    opacity: 0;
+    border-radius: 50%;
     transition: .5s ease;
 }
   
 .col-img-container:hover .col-img-desc {
-    height: 50%;
+    opacity: 1;
 }
   
 .col-img-desc div {

css/styles.css

@@ -50,74 +50,6 @@ video {
     height: auto;
   }
 
-/* Column system
-=================== */
-
-[class^="col-"] {
-    width: 100%;
-    margin-top: 1em;
-}
-
-[class^="col-"]:first-child {
-    margin-top: 0;
-}
-
-.col-1 {
-    width: 33.333334%;
-    float: left;
-}
-
-@media (min-width: 40rem) {
-    [class^="col-"] {
-        float: left;
-        padding: 0 0.5em;
-        margin-top: 0;
-    }
-
-    [class^="col-"]:first-child {
-        padding-left: 0;
-    }
-
-    [class^="col-"]:last-child {
-        padding-right: 0;
-    }
-
-    .col-3 {
-        width: 50%;
-        color: #f9f9ed;
-    }
-
-    .col-1 {
-        width: 16.6666%;
-    }
-}
-
-.column {
-    float: left;
-    width: 33.33%;
-    display: none; /* Hide all elements by default */
-  }
-
-.row {
-    margin: 10px -16px;
-  }
-
-
-.row,
-.row > .column {
-  padding: 0.8px;
-}
-
-.row:after {
-    content: "";
-    display: table;
-    clear: both;
-  }
-
-.show {
-    display: block;
-  }
-
 /* typography
 =================== */