When you click on the "Articles" link, or scoll down the index.html page, you get to a grid of boxes that provide links to the lastest articles. Hovering the mouse over the box for, say, Article 02, make the box appear to 'pop out'.
Tinkering around using my very rusty and limited knowledge of html, I managed to make changes to titles, and add my own pictures and articles. However, I cannot for the life of me work out how to add new boxes for additional articles and have these boxes 'pop out' when the mouse hovers over. Every time I publish a new article, I want to be able to add new box to the list and have it look like the others.
In the image below you can see that Article 06 on the left is 'popped' (has a kind of border around it) because the mouse is hovering over it. I have added Article 07 myself, it is the right size and in the right position but it does not 'pop' when the mouse passes over.
I've gone through the html code and the .css and I can't find any difference between the code for Article 07 (which I copied and pasted from the code for Article-02) and the code for Articles 01-06 which is included in the template.
I also added some code to the .css file. Originally it only went up to 'article-6' but I just added article-7 article-7' 'article-8 article-8 article-9 article-9 to the end.
grid-template-areas: 'article-1 article-1 article-1 article-1' 'article-2 article-2 article-3 article-3' 'article-4 article-4 article-5 article-5' 'article-6 article-6 article-7 article-7' 'article-8 article-8 article-9 article-9';
I then copied and pasted some code futher down. Basically, there was the following for articles-1 to -6 and so I just copied and pasted the code for article-6 and pasted it three times, changing the article numbers to -7, -8, and -9.
}
.container.article-6 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
-ms-flex-align: start;
padding: 16px;
border-radius: 20px;
background-image: none;
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: 0 0;
background-repeat: no-repeat;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
grid-area: article-6;
background-blend-mode: normal;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
.container.article-6 {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-ms-flex-pack: start;
-ms-flex-align: start;
padding: 16px;
border-radius: 20px;
background-image: none;
background-attachment: scroll;
background-position: left top;
background-clip: border-box;
background-origin: padding-box;
background-size: 0 0;
background-repeat: no-repeat;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
-webkit-transition-timing-function: ease-in-out;
-moz-transition-timing-function: ease-in-out;
-o-transition-timing-function: ease-in-out;
transition-timing-function: ease-in-out;
-webkit-transition-duration: .2s;
-moz-transition-duration: .2s;
-o-transition-duration: .2s;
transition-duration: .2s;
grid-area: article-6;
background-blend-mode: normal;
-webkit-box-align: start;
-webkit-align-items: flex-start;
-moz-box-align: start;
align-items: flex-start;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-moz-box-orient: vertical;
-moz-box-direction: normal;
-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-moz-box-pack: start;
justify-content: flex-start;
}
What I ended up with after this were additional boxes the right size and in the right place but they don't
pop when the mouse hovers over.
Below is the code included in the template for the Article 06 (that does pop)
<div class="container article-6">
<div class="container content-article">
<div class="responsive-picture index-article-picture" data-outofview="true">
<picture>
<img alt="Placeholder Picture" width="1280" height="912" src="./images/cole-page-not-found.png" loading="lazy">
</picture>
</div>
<h3 class="index-article-heading">Article 06</h3>
<p class="paragraph index-article-paragraph">Maybe it was the eleven months he spent in the womb. The doctor said there were claw marks on the walls of her uterus. Yeah, well, have you seen the new Mustang?<br></p>
<a class="link-text index-article-text-link" href="article-1.html">Read more ></a>
</div>
</div>
<div class="container content-article">
<div class="responsive-picture index-article-picture" data-outofview="true">
<picture>
<img alt="Placeholder Picture" width="1280" height="912" src="./images/cole-page-not-found.png" loading="lazy">
</picture>
</div>
<h3 class="index-article-heading">Article 06</h3>
<p class="paragraph index-article-paragraph">Maybe it was the eleven months he spent in the womb. The doctor said there were claw marks on the walls of her uterus. Yeah, well, have you seen the new Mustang?<br></p>
<a class="link-text index-article-text-link" href="article-1.html">Read more ></a>
</div>
</div>
And here is what I copied and pasted to make Article 07 (that doesn't pop)
<div class="container article-7">
<div class="container content-article">
<div class="responsive-picture index-article-picture" data-outofview="true">
<picture>
<img alt="Placeholder Picture" width="1280" height="912" src="./images/cole-done.png" loading="lazy">
</picture>
</div>
<h3 class="index-article-heading">Article 07<br></h3>
<p class="paragraph index-article-paragraph">A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear. We never had the chance to. <br></p>
<a class="link-text index-article-text-link" href="article-1.html">Read more ></a>
</div>
</div>
<div class="container content-article">
<div class="responsive-picture index-article-picture" data-outofview="true">
<picture>
<img alt="Placeholder Picture" width="1280" height="912" src="./images/cole-done.png" loading="lazy">
</picture>
</div>
<h3 class="index-article-heading">Article 07<br></h3>
<p class="paragraph index-article-paragraph">A flower in my garden, a mystery in my panties. Heart attack never stopped old Big Bear. I didn't even know we were calling him Big Bear. We never had the chance to. <br></p>
<a class="link-text index-article-text-link" href="article-1.html">Read more ></a>
</div>
</div>
Basically, I want to be able to add these boxes with links to the new articles as I write them but I can't see how to go beyond the 6 slots provides on the template and have them all look the same.
Even more basically, I want to know why the boxes included in the template 'pop' but when I add new ones they don't.
I hope that all makes sense and if anyone can help, I really would appreciate it.
