CODEWITHSUNDEEP
htmlcss
baneling
baneling

Reputation: 130

how to do hover animation correctly as done now does not work

I tried to put transition everywhere, but not one animation does not work, for me, this is strange behavior. What could it be connected with? sorry for the text fish, otherwise the question was not asked. I really don't know what else can be explained or added here.

I tried to put transition everywhere, but not one animation does not work, for me, this is strange behavior. What could it be connected with? sorry for the text fish, otherwise the question was not asked. I really don't know what else can be explained or added here.

 .background[data-v-0d076cda] {
     background-image: url("https://static-cse.canva.com/blob/241536/%D0%9E%D1%81%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D0%BE%D0%B8-%D0%BD%D0%B0-%D1%80%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9-%D1%81%D1%82%D0%BE%D0%BB-%D0%BE%D1%82%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5.png");
   height: 880px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   color: white;
  
}

.background .block[data-v-0d076cda] {
   border-right: 1px solid white;
   height: 100%;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-basis: 300px;
   padding-left: 60px;
   transition: all 1s ease 0.2s;
  
}

.background .block .h3[data-v-0d076cda] {
   color: white;  
}

.background .block .wrap[data-v-0d076cda] {
   margin-top: auto;
   transition: all 1s ease 0.2s;
  
}

.background .block p[data-v-0d076cda] {
   color: rgba(255, 255, 255, 0.5);
  
}

.background .block .desc[data-v-0d076cda] {
   color: white;
   transition: all 2s ease;
   margin-bottom: 106px;
   transition: all 1s ease 0.2s;
  
}

.background .block .desc span[data-v-0d076cda] {
   display: none;
   transition: all 1s ease 0.2s;
  
}

.background .block:hover .wrap[data-v-0d076cda] {
   margin-top: 106px;
   margin-bottom: auto;
  
}

.background .block:hover .desc span[data-v-0d076cda] {
   display: block;
  
}

.background.block[data-v-0d076cda]:last-child {
   border-right: none;
  
}
<div class="background" data-v-0d076cda="" data-v-2a183b29="">
   <div class="block" data-v-0d076cda="">
  <div class="wrap" data-v-0d076cda="">
     <h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
     <p data-v-0d076cda="">19 лет на рынке строительства</p>
  </div>
  <p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
  </p>
   </div>
   <div class="block" data-v-0d076cda="">
  <div class="wrap" data-v-0d076cda="">
     <h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Качество и комфорт</h3>
     <p data-v-0d076cda="">в каждой детали</p>
  </div>
  <p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
  </p>
   </div>
   <div class="block" data-v-0d076cda="">
  <div class="wrap" data-v-0d076cda="">
     <h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Настоящий кирпич</h3>
     <p data-v-0d076cda="">долговечный материал</p>
  </div>
  <p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
  </p>
   </div>
   <div class="block" data-v-0d076cda="">
  <div class="wrap" data-v-0d076cda="">
     <h3 class="h3 h3" data-v-20882b1b="" data-v-0d076cda="">Чистая экология</h3>
     <p data-v-0d076cda="">рядом Сормовский Парк</p>
  </div>
  <p class="desc" data-v-0d076cda=""><span data-v-0d076cda="">text</span>
  </p>
   </div>
</div>

Upvotes: 1

Views: 67

Answers (1)

persian-theme
persian-theme

Reputation: 6638

I did not understand exactly what you want. I changed the code a bit, both html and css. Now the transition is working properly.

.background[data-v-0d076cda] {
     background-image: url("https://static-cse.canva.com/blob/241536/%D0%9E%D1%81%D0%B5%D0%BD%D0%BD%D0%B8%D0%B5-%D0%BE%D0%B1%D0%BE%D0%B8-%D0%BD%D0%B0-%D1%80%D0%B0%D0%B1%D0%BE%D1%87%D0%B8%D0%B9-%D1%81%D1%82%D0%BE%D0%BB-%D0%BE%D1%82%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5.png");
   height: 880px;
   width: 100%;
   display: flex;
   justify-content: space-between;
   color: white;
  
}

.background .block {
   border-right: 1px solid white;
   height: 100%;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
   flex-basis: 300px;
   padding-left: 60px;
   transition: all 1s ease .2s;
  position: relative;
}

.background .block .h3 {
   color: white;
   position: absolute;
   top:75%;
   transition: all 1s ease .2s;
}

.background .block p[data-v-0d076cda] {
   color: white;
   position: absolute;
   top:80%;
   transition: all 1s ease .2s;
}

.background .block p[data-v-0d076cda] {
   color: rgba(255, 255, 255, 0.5);
  
}



.background .block .desc {
   color: white;
   position: absolute;
   top:83%;
   display: none;
}



.background .block:hover h3 {
   top:10%;
   display: block;
}

.background .block:hover p[data-v-0d076cda] {
   top:15%;
   display: block;
}

.background .block:hover .desc {
   display: block;
}

.background.block:last-child {
   border-right: none;
  
}
<div class="background" data-v-0d076cda="" data-v-2a183b29="">
   <div class="block">
     <h3 class="h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
     <p data-v-0d076cda="">19 лет на рынке строительства</p>
     <p class="desc"><span data-v-0d076cda="">text</span></p>
</div>
 
   <div class="block" data-v-0d076cda="">
     <h3 class="h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
     <p data-v-0d076cda="">19 лет на рынке строительства</p>
     <p class="desc"><span data-v-0d076cda="">text</span></p>
</div>
   
  
   <div class="block" data-v-0d076cda="">
     <h3 class="h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
     <p data-v-0d076cda="">19 лет на рынке строительства</p>
     <p class="desc"><span data-v-0d076cda="">text</span></p>
</div>
   
   
   <div class="block" data-v-0d076cda="">
     <h3 class="h3" data-v-20882b1b="" data-v-0d076cda="">Многолетний опыт</h3>
     <p data-v-0d076cda="">19 лет на рынке строительства</p>
     <p class="desc"><span data-v-0d076cda="">text</span></p>
     </div>
</div>

Upvotes: 1

Related Questions