bsod/brc
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

make images round

Browse source
This commit is contained in:
bsod 2020-10-30 01:12:05 +01:00
parent 1600adfcef
commit 0ade732357
3 changed files with 29 additions and 86 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
collections.php
View file

@ -8,18 +8,19 @@
$html = '
<div class="collection">
<h1>' . $c["name"] . '</h1>
<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">
<div>
<p>' . $c['name'] . '</p>
<a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
<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">
<div>
<p>' . $c['name'] . '</p>
<a href="show_collection.php?id=' . $index .'" class="button button-accent button-small">Details</a>
</div>
</div>
</div>
</div>
<div class="col-desc">
' . $c['collection_description'] . '
<div class="col-desc">
' . $c['collection_description'] . '
</div>
</div>
</div>
';

26
css/projects.css
View file

@ -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;
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 {

68
css/styles.css
View file

@ -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
=================== */