Problème pour faire en sorte que la superposition couvre une image

Question

Problème pour faire en sorte que la superposition couvre une image

Demandé el 27 de Septembre, 2018: Quand la question a-t-elle été
99 affichage: Nombre de visites la question a
3 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

Je n'arrive pas à comprendre pourquoi mon overlay ne produit pas la superposition d'opacité sur l'image. Lorsque vous visualisez cette image avec les outils de développement ouverts, la boîte de recouvrement semble couvrir uniquement les 5 % inférieurs (juste au-dessus du mot "solutions"), mais le lien fonctionne partout sur l'image.

Quelqu'un voit-il pourquoi ma superposition ne couvre pas l'image entière ?

.machInfo25 {
    display: inline-block;
    vertical-align: top;
    height: 30vh;
    position: relative;
    box-sizing: border-box;
}
.overlay {
    position: relative;
    height: 100%;
    width: 100%;
    background-color: rgba(0,0,0,.5);
    border: none;
  z-index: 3;
}
.machInfo25 {
    width: 25%;
}
.machInfo25 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
a .machineInfoTitle {
    color: #FFF;
}
.total-center {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

Demandé el 27 de Septembre, 2018 par Paul

Answer 1

3 Réponses

Answer 2

2voto

MickelsonMichael Points 708

Ajouter display: block; o display: inline-block à votre classe de superposition. <a> sont des éléments en ligne dont la taille diffère de celle des éléments en bloc. Le lien fonctionne toujours sur l'image entière puisque l'image est un enfant du lien.

.machInfo25 {
    display: inline-block;
    vertical-align: top;
    height: 30vh;
    position: relative;
    box-sizing: border-box;
}

.overlay {
  display: block;
  position: relative;
  height: 100%;
  width: 100%;
  background-color: rgba(0,0,0,.5);
  border: none;
  /*z-index: 3;*/
}

.machInfo25 {
    width: 25%;
}

.machInfo25 img {
  position: relative;
  z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

a .machineInfoTitle {
    color: #FFF;
}

.total-center {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

Répondu el 27 de Septembre, 2018 par MickelsonMichael (708 Points )

Answer 3

0voto

jawahar N Points 153

J'ai ajouté ici un exemple de code, j'espère que cela vous aidera.

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            .container {
              position: relative;
              width: 50%;
            }

            .image {
              display: block;
              width: 100%;
              height: auto;
            }

            .overlay {
              position: absolute;
              top: 0;
              bottom: 0;
              left: 0;
              right: 0;
              height: 100%;
              width: 100%;
              opacity: 0;
              transition: .5s ease;
              background-color: rgba(0,0,0,.5);
            }

            .container:hover .overlay {
              opacity: 1;
            }

            .text {
              color: white;
              font-size: 20px;
              position: absolute;
              top: 50%;
              left: 50%;
              -webkit-transform: translate(-50%, -50%);
              -ms-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
              text-align: center;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all" class="image">
            <div class="overlay">
                <div class="text">Solutions</div>
            </div>
        </div>
    </body>
</html>

Répondu el 27 de Septembre, 2018 par jawahar N (153 Points )

Answer 4

0voto

Gerard Points 9767

Le contexte de .overlay était sous l'image. J'ai appliqué la transparence noire à l'image pseudo-code de la classe .overlay .

.machInfo25 {
  height: 30vh;
  width: 25%;
}

.overlay {
  position: relative;
  display: block;
}

.overlay:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(0, 0, 0, 0.3);
  width: 100%;
  height: 100%;
}

.machInfo25 img {
  width: 100%;
}

a .machInfoTitle {
  color: white;
}

.total-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

<div class="machInfo25">
  <a class="overlay" href="solutions">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqXxLsqFCFPx0l_3_h5sn-0JN2oU5GU-wGnHH3CbJLSMeywV6CLA" alt="View all">
    <div class="total-center">
      <span class="machInfoTitle">Solutions</span>
    </div>
  </a>
</div>

Répondu el 27 de Septembre, 2018 par Gerard (9767 Points )

Problème pour faire en sorte que la superposition couvre une image

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

Problème pour faire en sorte que la superposition couvre une image

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: