эффект перехода не работает

Question

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

Я не могу найти свои ошибки, может ли кто-нибудь помочь мне решить мою проблему.

Мой HTML & Код CSS выглядит следующим образом.

.prodiv3 
 
{ 
 
\t background-color:#d79e37; 
 
\t position:relative; 
 
\t z-index:999; 
 
} 
 
.product-box a 
 
{ 
 
\t text-decoration:none; 
 
} 
 
.prodiv3 h2 
 
{ 
 
\t padding:0px !important; 
 
\t margin: 0px !important; 
 
\t color: #fff; 
 
\t padding-left:15px !important; 
 
} 
 
.prodiv3 p 
 
{ 
 
\t color: #000000; 
 
\t padding-left:15px !important; 
 
} 
 
.link-icon 
 
{ 
 
\t position:relative; 
 
\t bottom:120px; 
 
\t left:10px; 
 
\t visibility:hidden; 
 
\t width:60px; 
 
\t height:60px; 
 
\t background:url(../images/link-icon.png) no-repeat center center #ff411c; 
 
\t //display:block; 
 
\t border-radius:100%; 
 
} 
 
.product-box a:hover .link-icon 
 
{ 
 
\t visibility:visible; 
 
\t -moz-transition: all 1s ease-in !important; 
 
\t -webkit-transition: all 1s ease-in !important; 
 
\t -o-transition: all 1s ease-in !important; 
 
\t transition: all 1s ease-in !important; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4 col-sm-6 rowm"> 
 
      <div class="product-box"> 
 
       <a href="continuous_parison.php"> 
 
        <div class="prodiv2"> 
 
         <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive"> 
 
         <div class="prodiv3"> 
 
          <h2>Continuous<br> Parison Series</h2> 
 
          <p>Ranging from : 200 ML -5000ML</p> 
 
          <button class="link-icon"></button> 
 
         </div> 
 
        </div> 
 
       </a> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Answer 1

Вы должны применить переход к основному классу. Не к добавленному эффекту/классу.

.prodiv3 
 
{ 
 
\t background-color:#d79e37; 
 
\t position:relative; 
 
\t z-index:999; 
 
} 
 
.product-box a 
 
{ 
 
\t text-decoration:none; 
 
} 
 
.prodiv3 h2 
 
{ 
 
\t padding:0px !important; 
 
\t margin: 0px !important; 
 
\t color: #fff; 
 
\t padding-left:15px !important; 
 
} 
 
.prodiv3 p 
 
{ 
 
\t color: #000000; 
 
\t padding-left:15px !important; 
 
} 
 
.link-icon 
 
{ 
 
\t position:relative; 
 
\t bottom:120px; 
 
\t left:10px; 
 
\t opacity:0; 
 
\t width:60px; 
 
\t height:60px; 
 
\t background:url(../images/link-icon.png) no-repeat center center #ff411c; 
 
\t //display:block; 
 
\t border-radius:100%; 
 
\t -moz-transition: all 1s ease-in !important; 
 
\t -webkit-transition: all 1s ease-in !important; 
 
\t -o-transition: all 1s ease-in !important; 
 
\t transition: all 1s ease-in !important; 
 
} 
 
.product-box a:hover .link-icon 
 
{ 
 
\t opacity:1; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 col-sm-6 rowm"> 
 
     <div class="product-box"> 
 
     <a href="continuous_parison.php"> 
 
      <div class="prodiv2"> 
 
      <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive"> \t \t \t \t \t \t \t \t \t 
 
      <div class="prodiv3"> 
 
       <h2>Continuous<br> 
 
       Parison Series</h2> 
 
       <p>Ranging from : 200 ML -5000ML</p> 
 
       <button class="link-icon"></button> 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

Используйте opacity 0 и 1 вместо visitbility:

.prodiv3 
 
{ 
 
\t background-color:#d79e37; 
 
\t position:relative; 
 
\t z-index:999; 
 
} 
 
.product-box a 
 
{ 
 
\t text-decoration:none; 
 
} 
 
.prodiv3 h2 
 
{ 
 
\t padding:0px !important; 
 
\t margin: 0px !important; 
 
\t color: #fff; 
 
\t padding-left:15px !important; 
 
} 
 
.prodiv3 p 
 
{ 
 
\t color: #000000; 
 
\t padding-left:15px !important; 
 
} 
 
.link-icon 
 
{ 
 
\t position:relative; 
 
\t bottom:120px; 
 
\t left:10px; 
 
\t opacity: 0; 
 
\t width:60px; 
 
\t height:60px; 
 
\t background:url(../images/link-icon.png) no-repeat center center #ff411c; 
 
\t //display:block; 
 
\t border-radius:100%; 
 
} 
 
.product-box a:hover .link-icon 
 
{ 
 
\t opacity: 1; 
 
\t -moz-transition: all 1s ease-in !important; 
 
\t -webkit-transition: all 1s ease-in !important; 
 
\t -o-transition: all 1s ease-in !important; 
 
\t transition: all 1s ease-in !important; 
 
}

<div class="container"> 
 
      <div class="row"> 
 
       \t <div class="col-md-4 col-sm-6 rowm"> 
 
        \t <div class="product-box"> 
 
         \t <a href="continuous_parison.php"> 
 
\t \t \t \t \t \t \t <div class="prodiv2"> 
 
\t \t \t \t \t \t \t \t <img src="http://aew.worldwebinfotech.in/images/card1.jpg" alt="" class="img-responsive"> \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t \t \t \t \t <div class="prodiv3"> 
 
\t \t \t \t \t \t \t \t \t <h2>Continuous<br> 
 
\t \t \t \t \t \t \t \t \t Parison Series</h2> 
 
\t \t \t \t \t \t \t \t \t <p>Ranging from : 200 ML -5000ML</p> 
 
\t \t \t \t \t \t \t \t \t <button class="link-icon"></button> 
 
\t \t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </a> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
      </div>