Эффект при наведении курсора + гиперссылка на img

Question

Я пытаюсь разместить изображения в виде ссылок, но при этом на них накладывается некоторый эффект наведения. Ни эффект наведения, ни ссылка на данный момент не работают.

Я пытался использовать: наведите курсор на разные элементы, я пытался использовать z-index, я пытался проверить специфичность селектора, но что-то полностью останавливает эффект наведения, но я не вижу, что происходит не так.

<div class="fourthsection">
 <h1>Recent Projects</h1>

 <div class="projectpic-container">

    <div class="picbox">
        <div class= "imgBox">

          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="neuro-ai.jpeg")}} alt="Project1"></a>

        </div>
    </div>

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="cloudtech.jpg")}} alt="Project2"></a>
        </div>
    </div>    

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="statistics.jpg")}} alt="Project3"></a> 

        </div>
    </div>

    <div class="picbox">
        <div class= "imgBox">
          <a href={{url_for('portfolio.index')}}><img src={{url_for("static", filename="genetics.jpg")}} alt="Project4"></a>
        </div>
    </div>

 </div>
</div>

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  z-index: -2;
  font-size: 10px;
}
.fourthsection h1{
  position: absolute;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  top:2%;
  padding-top:1.5%;

}

.projectpic-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 13%; 
  margin-right: 15%;
  padding-top: 45px; 
  width: 80vw; 
  height: 28 vh; 

}
.projectpic-container .picbox{
  position: relative;
  width: 400px; 
  height: 250px; 
  margin: 8px; 
}

.projectpic-container .picbox .imgBox{
  position: relative; 
}

.projectpic-container .picbox .imgBox img{
  max-width: 100%;
  border-radius: 4%;
  -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.projectpic-container .picbox .imgBox:hover img{
    transform: 0.3s ease-in; 
    -webkit-filter: sepia(0);
    filter: sepia(0);
    cursor: pointer;
    -webkit-transform: 0.3s ease-in; 
}

Answer 1

Я на самом деле не знаю всю вашу страницу, и я не знаю, нужен ли z-index или нет, но если вы удалите z-index: -2 из

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  z-index: -2;
  font-size: 10px;
}

, он будет работать просто отлично .. . вот фрагмент (я, очевидно, использовал изображение от Google с href, направленным на Google в target _blank)

.fourthsection{
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  font-size: 10px;
}
.fourthsection h1{
  position: absolute;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  top:2%;
  padding-top:1.5%;

}

.projectpic-container{
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 13%;
  margin-right: 15%;
  padding-top: 45px;
  width: 80vw;
  height: 28 vh; 

}
.projectpic-container .picbox{
  position: relative;
  width: 400px;
  height: 250px;
  margin: 8px; 
}

.projectpic-container .picbox .imgBox{
  position: relative;
}

.projectpic-container .picbox .imgBox img{
  max-width: 100%;
  border-radius: 4%;
  -webkit-filter: sepia(100%);
    filter: sepia(100%);
    -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
  
}

.projectpic-container .picbox .imgBox:hover img{
    transform: 0.3s ease-in;
    -webkit-filter: sepia(0);
    filter: sepia(0);
    cursor: pointer;
    -webkit-transform: 0.3s ease-in; 
}

<div class="fourthsection">
 <h1>Recent Projects</h1>

 <div class="projectpic-container">

    <div class="picbox">
        <div class= "imgBox">

          <a href="https://www.google.com" target="_blank"><img src="https://besthqwallpapers.com/Uploads/25-8-2016/3005/thumb2-remains-of-bridge-lake-park-kromelow-kromelow-lake-rakott.jpg" alt="Project1"></a>

        </div>
    </div>
  </div>
</div>

Answer 2

У меня был такой же вывод, как и у Алессса. Удалите параметр z-index: -2; из правила .fourthsection , и все будет хорошо. Отмените эту настройку, и действие при наведении прекратится.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="hu" xml:lang="hu" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Page Title</title>
    <link href="__imghover.css" type="text/css" rel="stylesheet" />
</head>

<body>
    <main>
        <div class="fourthsection">
            <h1>Recent Projects</h1>

            <div class="projectpic-container">

                <div class="picbox">
                    <div class="imgBox">
                        <a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project1" /></a>
                    </div>
                </div>

                <div class="picbox">
                    <div class="imgBox">
                        <a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project2" /></a>
                    </div>
                </div>    

                <div class="picbox">
                    <div class= "imgBox">
                        <a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project3" /></a> 
                    </div>
                </div>

                <div class="picbox">
                    <div class= "imgBox">
                        <a href="portfolio.index"><img src="http://keve.maclab.org/pub/tmp/demopic.jpg" alt="Project4" /></a>
                    </div>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

Обратите внимание: я заменил ссылку на колбу статическим img url.

.fourthsection {
  background-color: rgb(247, 197, 164);
  position: relative;
  padding-top: 80px;
  padding-bottom: 60px;
  font-family: 'Nunito', sans-serif;
  /*z-index: -2;*/
  font-size: 10px;
}

.fourthsection h1 {
  position: absolute;
  margin-left: 15%;
  margin-right: 15%;
  font-size: 1.8rem;
  letter-spacing: 3px;
  top:2%;
  padding-top:1.5%;
}

.projectpic-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  margin-left: 13%; 
  margin-right: 15%;
  padding-top: 45px; 
  width: 80vw; 
  height: 28vh; 
}

.projectpic-container .picbox {
  position: relative;
  width: 400px; 
  height: 250px; 
  margin: 8px; 
}

.projectpic-container .picbox .imgBox {
  position: relative; 
}

.projectpic-container .picbox .imgBox img {
  max-width: 100%;
  border-radius: 4%;
  -webkit-filter: sepia(100%);
  filter: sepia(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.projectpic-container .picbox .imgBox img:hover {
  transform: 0.3s ease-in; 
  -webkit-filter: sepia(0);
  filter: sepia(0);
  cursor: pointer;
  -webkit-transform: 0.3s ease-in; 
}