Nieprawidłowe wysuwanie się elementu overlay

Question

Cześć,

Mam problem z wysuwaniem się bloku overlay na kartę z obrazem - ma wysuwać się spod bloku z tekstem, umieszczonego pod obrazem, a wysuwa się z dolnej granicy karty i przesuwa się po jej wierzchu.
Podaję odpowiednie fragmenty kodu.
 

<ul class="grid">
                    <li class="grid__item">
                            <img src="./images/technocrack.jpg" alt="Technocrack">
                            <div class="grid__overlay">
                                <p class="grid__overlay-text">Technocrack jest popularną platformą, wykorzystywaną do rozpowszechniania
                                    koronawirusa. Firmy wykorzystują tę platformę do celów szpiegowskich i ataków na
                                    niezabezpieczone serwery konkurencji.
                            </div>
                            <div class="grid__text-field">
                                <h4 class="grid__title">Technocrack</h4>
                                <p class="grid__subtitle">Strona internetowa</p>
                            </div>
                    </li>
</ul>

.grid {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin-top: 0;
    margin-right: -8px;
    margin-bottom: 64px;
    margin-left: -8px;

    &__item {
        position: relative;
        width: 370px;
        height: 404px;
        margin: 25px 15px 30px 15px;
        overflow: hidden;
        transition-property: box-shadow;
        transition-duration: 250ms;
        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        &:hover {
            box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12),
                4px 4px 4px rgba(0, 0, 0, 0.06),
                4px 4px 6px rgba(0, 0, 0, 0.16),
                8px 0px 10px rgba(0, 0, 0, 0.30),
                0px 8px 10px rgba(0, 0, 0, 0.30);
            cursor: pointer;
        }
    }
&__text-field {
    position: relative;
    border-right: 1px solid #EEEEEE;
    border-bottom: 1px solid #EEEEEE;
    border-left: 1px solid #EEEEEE;
    border-top: 0;
    padding-top: 20px;
     }
&__title {
    position: relative;
        margin: 0 24px 0 24px;
        font-family: getFont('main-font');
        font-size: 18px;
        font-weight: 700;
        line-height: 36px;
        letter-spacing: 0.06em;
        text-transform: none;
        text-decoration: none;
        color: getColor('font-brand-color');
    }
&__subtitle {
        position: relative;
        margin: 4px 24px 20px 24px;
        font-size: 16px;
        font-weight: 400;
        font-family: getFont('main-font');
        color: getColor('font-fourth-color');
        line-height: 30px;
        text-decoration: none;
    }
&__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 294px;
    transform: translateY(120%);
    transition-property: transform;
    transition-duration: 250ms;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
&__overlay-text {
        position: absolute;
        padding: 49px 45px 49px 24px;
    font-family: getFont('main-font');
    color: getColor('font-secondary-color');
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
    letter-spacing: 0.03em;
}
}

.grid__item:hover .grid__overlay {
    transform: translateY(0);
    background-color: rgba(33, 150, 243, 0.9);
}

Z góry dziękuję za podpowiedzi.

Answer 1

Może podaj wartość ujemną dla elementu o klasie .grid__overlay

  top: -100%;

a przy .grid__item:hover większą od 100%

 

...

.grid__overlay {
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 294px;
  transition-property: transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

...

.grid__item:hover .grid__overlay {
  transform: translateY(180%);
  background-color: rgba(33, 150, 243, 0.9);
}

 

 

P.S.

<ul class="grid">
  <li class="grid__item">    
    <div class="grid__overlay">
      <div class="grid__overlay-text">
        Technocrack jest popularną platformą, wykorzystywaną do rozpowszechniania koronawirusa. Firmy wykorzystują tę platformę do celów szpiegowskich i ataków na niezabezpieczone serwery konkurencji.
      </div>

      <div class="grid__image">
        <img src="https://picsum.photos/370/145/?random=1" alt="Technocrack">          
      </div>
      <div class="grid__text-field">
        <h4 class="grid__title">Technocrack</h4>
        <p class="grid__subtitle">Strona internetowa</p>
      </div>
    </div>
  </li>

  <li class="grid__item">    
    <div class="grid__overlay">
      <div class="grid__overlay-text">
        Technocrack jest popularną platformą, wykorzystywaną do rozpowszechniania koronawirusa. Firmy wykorzystują tę platformę do celów szpiegowskich i ataków na niezabezpieczone serwery konkurencji.
      </div>

      <div class="grid__image">
        <img src="https://picsum.photos/370/145/?random=2" alt="Technocrack">          
      </div>
      <div class="grid__text-field">
        <h4 class="grid__title">Technocrack</h4>
        <p class="grid__subtitle">Strona internetowa</p>
      </div>
    </div>
  </li>
</ul>

.grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin-top: 0;
  margin-right: -8px;
  margin-bottom: 64px;
  margin-left: -8px;
}
.grid__item {
  position: relative;
  width: 370px;
  height: 465px;
  margin: 25px 15px 30px 15px;
  overflow: hidden;
  transition-property: box-shadow;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.grid__item:hover {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12), 4px 4px 4px rgba(0, 0, 0, 0.06), 4px 4px 6px rgba(0, 0, 0, 0.16), 8px 0px 10px rgba(0, 0, 0, 0.3), 0px 8px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
}
.grid__overlay {
  position: relative;
  width: 100%;
  height: 285px;
}
.grid__image {
  height: 145px;
}
.grid__image,
.grid__text-field {
  position: relative;
}
.grid__image {
  background-color: white;
  padding: 0;
  margin: 0;
}
.grid__text-field {
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  border-top: 0;
  padding-top: 20px;
  background-color: white;
}
.grid__title {
  margin: 0 24px;
  font-family: getFont("main-font");
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  color: getColor("font-brand-color");
}
.grid__subtitle {
  margin: 4px 24px 20px 24px;
  font-size: 16px;
  font-weight: 400;
  font-family: getFont("main-font");
  color: getColor("font-fourth-color");
  line-height: 30px;
  text-decoration: none;
}
.grid__overlay-text {
  position: absolute;
  top: 0;
  z-index: 0;
  padding: 49px 45px 49px 24px;
  font-family: getFont("main-font");
  color: getColor("font-secondary-color");
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.03em;
  transition: 
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    background 250ms;
}
.grid__item:hover .grid__overlay-text {
  transform: translateY(75%);
  background-color: rgba(33, 150, 243, 0.9);
}

 

Comments

Dziękuję za uwagi, nie jestem jednak pewien, czy właściwie opisałem mój problem.

---

A może tak  

<ul class="grid">
  <li class="grid__item">    
    <div class="grid__overlay">
      <div class="grid__overlay-text">
        Technocrack jest popularną platformą, wykorzystywaną do rozpowszechniania koronawirusa. Firmy wykorzystują tę platformę do celów szpiegowskich i ataków na niezabezpieczone serwery konkurencji.
      </div>
 
      <div class="grid__image">
        <img src="https://picsum.photos/370/145/?random=1" alt="Technocrack">          
      </div>
      <div class="grid__text-field">
        <h4 class="grid__title">Technocrack</h4>
        <p class="grid__subtitle">Strona internetowa</p>
      </div>
    </div>
  </li>
 
  <li class="grid__item">    
    <div class="grid__overlay">
      <div class="grid__overlay-text">
        Technocrack jest popularną platformą, wykorzystywaną do rozpowszechniania koronawirusa. Firmy wykorzystują tę platformę do celów szpiegowskich i ataków na niezabezpieczone serwery konkurencji.
      </div>
 
      <div class="grid__image">
        <img src="https://picsum.photos/370/145/?random=2" alt="Technocrack">          
      </div>
      <div class="grid__text-field">
        <h4 class="grid__title">Technocrack</h4>
        <p class="grid__subtitle">Strona internetowa</p>
      </div>
    </div>
  </li>
</ul>

.grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 0;
  margin-top: 0;
  margin-right: -8px;
  margin-bottom: 64px;
  margin-left: -8px;
}
.grid__item {
  position: relative;
  width: 370px;
  height: 465px;
  margin: 25px 15px 30px 15px;
  overflow: hidden;
  transition: 
    box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1),
    height 350ms 900ms linear;
}
.grid__item:hover {
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.12), 
    4px 4px 4px rgba(0, 0, 0, 0.06), 
    4px 4px 6px rgba(0, 0, 0, 0.16), 
    8px 0px 10px rgba(0, 0, 0, 0.3), 
    0px 8px 10px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  height: 280px;
}
.grid__overlay {
  position: relative;
  width: 100%;
  height: 285px;
}
.grid__image {
  height: 145px;
}
.grid__image,
.grid__text-field {
  position: relative;
}
.grid__image {
  background-color: white;
  padding: 0;
  margin: 0;
}
.grid__text-field {
  border-right: 1px solid #eeeeee;
  border-bottom: 1px solid #eeeeee;
  border-left: 1px solid #eeeeee;
  border-top: 0;
  padding-top: 20px;
  background-color: white;
}
.grid__title {
  margin: 0 24px;
  font-family: getFont("main-font");
  font-size: 18px;
  font-weight: 700;
  line-height: 36px;
  letter-spacing: 0.06em;
  text-transform: none;
  text-decoration: none;
  color: getColor("font-brand-color");
}
.grid__subtitle {
  margin: 4px 24px 20px 24px;
  font-size: 16px;
  font-weight: 400;
  font-family: getFont("main-font");
  color: getColor("font-fourth-color");
  line-height: 30px;
  text-decoration: none;
}
.grid__overlay-text {
  position: absolute;
  top: 0;
  z-index: 0;
  padding: 40px 45px 49px 24px;
  font-family: getFont("main-font");
  color: getColor("font-secondary-color");
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: 0.03em;
  transition: 
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    background 250ms;
}
.grid__item:hover .grid__overlay-text {
  animation: slide_down_up 30s;
}

@keyframes slide_down_up {
  from {
    z-index: 0;
    transform: translateY(0%);
    background-color: rgba(33, 150, 243, 0.9);
  }
  3% {
    z-index: 0;
    transform: translateY(80%);
  }
  4% {
    z-index: 99; 
  }
  6% {
    transform: translateY(0%);
  }
  99% {
    z-index: 99;
    transform: translateY(0%);
    background-color: rgba(33, 150, 243, 0.9);
    color: black;
  }
  to {
    z-index: 0;
    background-color: transparent;
    color: transparent;
  }
}