Próbuję odzyskać reagującą murację do pracy z podwójną nakładką w WordPress. Obecnie udało mi się uzyskać wielkość mrocznego nakładki idealnie z obrazem miniaturowym. Dodałem również teksty, które pojawiają się na górnej części nakładki, stąd podwójną nakładką na miniaturę.

Problem polega na tym, że po zmianie rozmiaru okna lub wyświetlam posty na blogach za pomocą telefonu komórkowego, Nakładka HOVER ROZMIAR Przewyższa miniaturę rozmiaru na niektórych miniaturach pozycja nakładki jest całkowicie wyłączona.

Jak upewnić się, że podwójne nakładki (czarny przezroczysty unośnie i teksty) pozostanie w tej samej pozycji i skali prawidłowo wraz z miniaturą?

Oto mój kod:

.title, .excerpt, .date {
  position: absolute;
  z-index: 1;
}

.title {
bottom: 150px;
}

.date {
bottom: 130px;
}

.excerpt {
bottom: 100px;
}

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

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

Aktualizacja: Dodałem również overlay do moich zapytań multimedialnych, ale nie trzeba nakładki w życie, jak moje miniatury.

Aktualizacja 2: Kod DASTCHO naprawia problem, aby responował nakładka z miniaturą. Następnym problemem jest to, że ponieważ nakładka jest ustawiona na 100%, kiedy używam padding: 10px; sprawia, że siatka jest większa, ale nie mogę uczynić go mniejszym. Thumbnail ma wyściółkę i chciałbym zatrzymać paddę w ten sposób.

Aktualizacja 3: Nie jestem pewien, czy jest to opłacalna poprawka na długotrwałą, ale tak czy inaczej, działa. Spowoduje to utrzymanie reagowania nakładki i regulowałem top, left, width i height jest trochę pasowała do miniaturki.

.overlay:after {
  content: '';
  position: absolute;
  width: 97.5%;
  height: 97.5%;
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Aktualizacja 4: Znalazłem lepszą alternatywę, uniemożliwi to nakładkę nieco poza miejsce podczas zmiany rozmiaru przeglądarki.

.overlay:after {
  content: '';
  position: absolute;
  display: block;
  height: calc(100% - 10px);
  width: calc(100% - 10px);
  top: 5px;
  left: 5px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Twoje zdrowie!

0
user13859048 27 lipiec 2020, 20:26

1 odpowiedź

Najlepsza odpowiedź

Zmień to:

.overlay:after {
  content: '';
  position: absolute;
  width: 362px;
  height: 362px;
  top: 5px; 
  left: 1;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Do tego:

.overlay:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: rgba(0,0,0,0.6);
  opacity: 0;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
}

Mam nadzieję, że to rozwiązuje twój problem. Jeśli nie możesz zapytać!

0
Dantcho 27 lipiec 2020, 18:11