Image not clickable - image

Question

I have a cover of a book that I want to be clickable but I can't get the link to be the image.
<div class="imagePage">
<a href="../index.php">
<img src="../images/covers/denmark.jpg" alt="Denmark">
</a>
</div>
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
}
Please can anyone help. I wonder if my media queries are interfering:
/* xs */
img {
width: 150px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
img {
width: 200px;
}
}
/* md */
#media (min-width: 992px) {
img {
width: 350px;
}
}
/* lg */
#media (min-width: 1200px) {
img {
width: 500px;
}
}
Edit: I am using bootstrap. Here is my whole CSS:
body {
padding-top: 30px;
font-size: 16px;
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif !important;
}
#media (max-width: 979px) {
body {
padding-top: 30px;
}
}
/* xs */
img {
width: 150px;
height: auto;
}
/* sm */
#media (min-width: 768px) {
img {
width: 200px;
}
}
/* md */
#media (min-width: 992px) {
img {
width: 350px;
}
}
/* lg */
#media (min-width: 1200px) {
img {
width: 500px;
}
}
/* xs */
p {
font-size: 12px;
}
/* sm */
#media (min-width: 768px) {
p {
font-size: 14px;
}
}
/* md */
#media (min-width: 992px) {
p {
font-size: 16px;
}
}
/* lg */
#media (min-width: 1200px) {
p {
font-size: 18px;
}
}
/* xs */
h1 {
font-size: 28px !important;
}
/* sm */
#media (min-width: 768px) {
h1 {
font-size: 50px !important;
}
}
/* md */
#media (min-width: 992px) {
h1 {
font-size: 84px !important;
}
}
/* lg */
#media (min-width: 1200px) {
h1 {
font-size: 96px !important;
}
}
.navbar-left img {
width: auto;
}
.sm-bt img {
width: auto;
}
.end img {
width: auto;
}
.titlePage img {
max-width: 280px;
}
/*---Start Parallax---*/
.parallax-top {
background-image: url("../images/hero3.jpg");
height: 1200px;
background-attachment: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
}
.main .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0;
}
.main .caption h1 {
margin-top: 0px;
}
.main .caption p {
width: 80%;
margin: auto;
margin-bottom: 10px;
}
.parallax-middle {
background-image: url("../images/hero1.jpg");
height: 1200px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption-middle {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
font-size: 20px;
background-color: black;
opacity: 0.75;
height: auto;
padding: 1%;
}
.parallax-bottom {
background-image: url("../images/hero2.jpg");
height: 1200px;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.caption-bottom {
position: relative;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
padding: 1%;
height: auto;
}
/*---End Parallax---*/
.box {
height: 200px;
font-size: 40px;
margin-top: 80px;
text-align: center;
}
.thumbs {
margin-right: 15px;
max-width: auto;
}
.thumbnail {
border: none !important;
}
.fb-page {
margin-right: 50px;
}
.footer {
padding-top: 5px;
position: relative;
bottom: 0;
width: 100%;
height: auto;
background-color: #fff;
text-align: center;
}
.footer p {
font-size: 12px;
}
#media (min-width: 768px) {
.footer p {
font-size: 14px;
}
}
#media (min-width: 992px) {
.footer p {
font-size: 16px;
}
}
.sm-bt a {
float: right;
margin-top: 12px;
margin-right: 5px;
}
hr {
display: block;
margin-top: 0.5em;
margin-bottom: 0.5em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
}
.pageOuter {
padding-top: 20px;
}
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
}
.blurb {
display: block;
position: relative;
}
/*---Title Pages---*/
.pageOuter {
background-image: url("../images/background.png");
}
.titlePage {
width: 80%;
margin: auto;
padding-top: 30px;
padding-bottom: 30px
}
.titlePage .jumbotron {
width: 45%;
font-size: 14px;
float: right;
padding: 25px !important;
margin-right: 0px;
opacity: 0.7;
}
#media screen and (min-width: 468px) {
.titlePage .jumbotron p {
font-size: 16px;
}
.titlePage .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.titlePage .jumbotron p {
font-size: 20px;
}
.titlePage .jumbotron h3 {
font-size: 24px;
}
}
.titlePage .container {
width: 100% !important;
margin-right: 0px;
}
.titlePage h1 {
text-align: center;
}
.titlePage h2 {
text-align: center;
}
.titlePage h3 {
text-align: center;
}
.titlePage p {
color: #4d4d4d;
line-height: 1.59;
margin-top: 0em;
margin-bottom: 1em;
}
.titleDetails ul {
list-style-type: none;
padding-left: 0;
}
.titleDetails ul li {
font-size: 14px;
color: #4d4d4d;
line-height: 1.59;
}
#media (min-width: 768px) {
.titleDetails ul li {
font-size: 16px;
color: #4d4d4d;
line-height: 1.59;
}
}
#media (min-width: 992px) {
.titleDetails ul li {
font-size: 18px;
color: #4d4d4d;
line-height: 1.59;
}
}
.titleDetails h3 {
text-align: left;
font-size: 20px;
}
.titleDetails {
margin-right: 0px;
float: left;
}
/*---End Title Pages---*/
/*---Start Contact---*/
.contactPage {
width: 80%;
margin: auto;
padding-top: 30px;
padding-bottom: 30px;
}
.contactPage h1 {
text-align: center;
}
.contactPage .jumbotron {
width: 40%;
padding: 10px;
position: center;
}
#media screen and (min-width: 468px) {
.contactPage .jumbotron p {
font-size: 16px;
}
.contactPage .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.contactPage .jumbotron p {
font-size: 20px;
}
.contactPage .jumbotron h3 {
font-size: 24px;
}
}
.home-btn {
text-align: center;
}
/*---end Contact---*/
.regionPage {
width: 80%;
margin: auto;
padding-top: 20px;
}
/*---Start Africa---*/
.africaHero {
background-image: url("../images/africaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.africaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Africa---*/
/*---Start Author---*/
.authorHero {
background-image: url("../images/hero4.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.authorHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Author---*/
/*---Start Asia--*/
.asiaHero {
background-image: url("../images/asiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.asiaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end asia---*/
/*---Start Australasia---*/
/*---End Australasia---*/
.australasiaHero {
background-image: url("../images/australasiaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.australasiaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---Start N America---*/
.namericaHero {
background-image: url("../images/namericaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.namericaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end N America---*/
/*---Start S America---*/
.samericaHero {
background-image: url("../images/samericaHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.samericaHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---End S America--*/
/*---Start Europe---*/
.europeHero {
background-image: url("../images/europeHero.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.europeHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---Start Why CS---*/
.whyHero {
background-image: url("../images/hero5.jpg");
height: 1200px;
background-position: top;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.whyHero .caption {
position: absolute;
left: 0;
top: 40%;
width: 100%;
text-align: center;
color: white;
background-color: black;
opacity: 0.75;
height: auto;
padding: 0.5%;
}
/*---end Why CS---*/
/*---Start authors---*/
.authors .caption {
text-align: center;
}
.authorPage img {
display: block;
margin: auto;
}
.authorPage p {
margin-top: 25px;
}
.authorPage {
width: 80%;
margin: auto;
}
.authorPage h1 {
text-align: center;
}
.authorPage .container{
display: flex
}
.authorPage .jumbotron {
width: 40%;
padding: 3px;
position: center;
margin: 5%;
}
.authorPage ul {
list-style-type: none;
padding-left: 0;
}
#media screen and (min-width: 468px) {
.authorPage .jumbotron p {
font-size: 16px;
}
.author .jumbotron h3 {
font-size: 18px;
}
}
#media screen and (min-width: 1200px) {
.authorPage .jumbotron p {
font-size: 20px;
}
.authorPage .jumbotron h3 {
font-size: 24px;
}
}
/*---End authors---*/
/*---start team---*/
h1 {
text-align: center;
}
.team1 {
padding: 2%;
}
.team2 {
padding: 2%;
}
.team1 img {
float: right;
margin-left: 10px;
padding: 10px;
}
.team2 img {
float: left;
margin-right: 15px;
padding: 10px;
}
CodePen

Answer 1

Hi i have fixed the issue by adding position and z-index to your imagePage div. Please check the styling below and please let me know.
.imagePage {
float: left;
border-top: 30px;
padding-right: 30px;
position: relative;
z-index: 10;
}