ARTICLE AD BOX
I am getting stumped as to why the middle <a href> links don't work (Tahiti and Hawaii). The h2 link and img link both work, but not the destination links. When mouseover each of the links shows in the browser url popup in the lower left corner, but the middle two won't click through.
<div class="card"> <div class="dark"> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"> <header><h2 class="title3">South Pacific Bike Tours</h2></header> </a> <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>, <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a> </div> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"><img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia"></a> </div>I have tried variations, img without <a href>, moving img to the top. Also tried without <header> and putting <a href> link inside H2.
<div class="card"> <div class="dark"> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"> <header><h2 class="title3">South Pacific Bike Tours</h2></header> </a> <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>, <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a> </div> <img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia"> </div> <div class="card"> <img src="img/pedalers-homepage/cycling-on-raiatea-island.jpg" alt="cycling in French Polynesia"> <div class="dark"> <a href="https://pedalers.travel/pacific-islands-bicycle-tours-hawaii-tahiti-bora-bora.htm"> <header><h2 class="title3">South Pacific Bike Tours</h2></header> </a> <a href="https://pedalers.travel/bicycling-tahiti-french-polynesia.htm">Tahiti</a>, <a href="https://pedalers.travel/hawaii-bike-tours-big-island-dreams-cycling-tours.htm">Hawaii</a> </div> </div>The CSS is below that applies to these cards, the cardcontainer is assigned to the parent div.
.cardcontainer { display: flex; flex-flow: row wrap; justify-content: center; } .card { flex-grow: 0; flex-shrink: 0; height: 50vh; max-height: 325px; color: #fff; font-weight: 600; line-height: 1.2; font-size: 1.6rem; text-shadow: 1px 1px 1px rgb(0, 0, 0), 0 0 7px rgba(60, 48, 40,.85), 0 0 15px rgba(60, 48, 40,.55); overflow: hidden; cursor: pointer; border-radius: 50px 15px; box-shadow: 2px 2px 10px rgba(60,48,40,0.5); } .card .dark { position: absolute; top: 0; width: 100%; padding: 20px 20px 25px; z-index: 1; background: linear-gradient(180deg, rgba(33, 33, 33, 0.5) 0%, rgba(0, 0, 0, 0) 100%); text-align: center; } a { text-decoration: none; }It is probably something obvious that I am blinded to.
