I use these CSS boxes to display news on my site, and each box has a link anchored to the bottom using position: absolute; and bottom: 10px;
For some reason, the link doesn't appear inside the box unless you hover over it. It's floating way higher up on the page and I can't figure out why. See the image below and here's a code snippet to take a look at:
The link is only showing up on hover-- why!?
.news_section {
width: 100%;
height: 100%;
margin-left: auto;
margin-right: auto;
}
.news_container {
width: 100%;
margin-left: 5%;
margin-right: 5%;
}
.news_item { float: left; font-family: graphik-light; font-size: 1.1em; margin: 25px 25px 25px 0px; width: 320px; height: 500px; cursor: pointer; transition: all 0.2s ease-out;
-webkit-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
-moz-box-shadow: 0px 3px 10px 1px rgba(204, 204, 204 0, 1);
box-shadow: 0px 3px 10px 1px rgba(204, 204, 204, 1);
}
.news_item:hover { background: #efefef; transform: scale(1.04); transition: all 0.2s ease-in; cursor: pointer; }
.news_img {
width: 100%;
height: 100%;
object-fit: contain;
}
.news_header { font-family: 'Oswald', sans-serif; font-size: 22px; line-height: 1.4em; text-align: left; margin-top: 18px; margin-left: 14px; margin-right: 14px; }
.news_outlet { font-size: 13px; text-align: left; margin-top: 7px; margin-left: 14px; color: #c1c1c1; font-family: graphik-regular; text-transform: uppercase; }
.news_subtext { font-size: 14px; text-align: left; margin-top: 20px; margin-left: 14px; margin-right: 14px; color: #4d5051; font-family: graphik-regular; }
.news_more { position: absolute; bottom: 10px; font-size: 16px; margin-left: 14px; color: #000; font-family: 'Oswald', sans-serif; }<section class="news_section">
<div class="news_container">
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/1.jpg" class="news_img"/></div>
<div class="news_header">Marg Helgenberger Set For Season 2 Of 'CSI: Vegas', Will Reprise Catherine Role</div>
<div class="news_outlet">Deadline Hollywood</div>
<div class="news_subtext">Marg Helgenberger has signed on to star in Season 2 of CBS’ CSI: Vegas, reprising her role as Catherine Willows from the original CSI.</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/2.jpg" class="news_img"/></div>
<div class="news_header">‘All Rise’: Marg Helgenberger Will Return For Season 3 On OWN</div>
<div class="news_outlet">Deadline Hollywood</div>
<div class="news_subtext">Marg Helgenberger will reprise the role of Supervising Judge Lisa Benner in OWN’s All Rise for Season 3.</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/3.jpg" class="news_img"/></div>
<div class="news_header">Q’orianka Kilcher, Scott Haze, Wes Studi, Nick Cassavetes Starring in Thriller ‘Yesteryear’</div>
<div class="news_outlet">Variety</div>
<div class="news_subtext">The film follows Alma Deswood (Kilcher), a struggling, young Native actress who psychologically unravels in quarantine amidst the COVID-19 pandemic and the Black Lives Matter movement.</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/4.jpg" class="news_img"/></div>
<div class="news_header">Universal Pictures Content Group Boards ‘Relax, I’m From The Future’ With Rhys Darby & Gabrielle Graham</div>
<div class="news_outlet">Deadline Hollywood</div>
<div class="news_subtext">'Relax, I'm from the Future' follows Casper (Rhys Darby), a charming, but embarrassingly underprepared Time Traveller, now trapped in the past.</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/5.jpg" class="news_img"/></div>
<div class="news_header">Arrow Snaps Up Mark O’Brien’s Debut Feature ‘The Righteous’ Starring Henry Czerny, Mimi Kuzyk (EXCLUSIVE)</div>
<div class="news_outlet">Variety</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/6.jpg" class="news_img"/></div>
<div class="news_header">Check out Archive 81 starring Julia Chan, currently #1 on Netflix!</div>
<div class="news_outlet">Netflix</div>
<div class="news_more"><i class="fa-solid fa-circle-play"></i> Watch The Trailer ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/7.jpg" class="news_img"/></div>
<div class="news_header">The Psychologists Are In: NEW EPISODE! </div>
<div class="news_outlet">Audible</div>
<div class="news_subtext">Check out our very own Chris Henze alongside Tim Omundson and Maggie Lawson, revealing a lot of insider info on the journey of our show. #psych</div>
<div class="news_more"><i class="fa-solid fa-podcast"></i> Listen to the Podcast ></div>
</div>
<div class="news_item">
<div><img src="https://thruline.com/prototype/images/news/8.jpg" class="news_img"/></div>
<div class="news_header">Mick Fleetwood Drums Up Musical Drama Series ’13 Songs’ In Development At FOX</div>
<div class="news_outlet">Deadline Hollywood</div>
<div class="news_more"><i class="fa-solid fa-newspaper"></i> Read The Article ></div>
</div>
</div>
</section> 
