元素只出現在懸停中

Question

我遇到了html5和css3的問題，當我在圖像中進行懸停時，發生了一些錯誤。是爲他出現的第一個2，但不出現在圖像懸停的快速出現，已經algune會知道告訴我爲什麼這樣？在第一張圖像下方，系統正常運行，第二張圖像和圖像懸停。

我的代碼HTML5：

<div class="col-lg-12" id="container"> 
    <div class="ala col-lg-3 col-md-4 col-sm-6 col-xs-12 col-md-25"> 
     <span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"> <input type="checkbox" name="star[]" class="star" value="1" id="star_1" checked>Favorita</span> 
     <div class="hovereffect clic"> 
      <div class="clic" style="display:block"></div> 
       <div class="heart"></div> 
        <img class="img-responsive" src="../images/photo/namePhoto.jpg" alt="namePhoto"> 
      <div class="overlay"> 
       <a class="info test-popup-link" href="../images/photo/namePhoto.jpg"><img src="../images/lupa.png"></a><br><br><br> 

      <div class="btn-group" data-toggle="buttons"> 
       <label class="btn btn-primary check active"> 
        <input type="checkbox" class="ck" name="ck[]" checked value="1" id="ck_1"> <span class="che">Desmarcar</span> 
       </label> 
      </div> 
     </div> 
    </div> 
</div> 

我的高亮元素的CSS代碼：

.hovereffect .clic { 
    background-color: #13B8DC; 
    z-index: 1; 
    overflow: hidden; 
    width: 80px; 
    height: 80px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    position: absolute; 
    top: -30px; 
} 

.clic:before { 
    content: "\f00c"; 
    font: normal normal normal 14px/1 FontAwesome; 
    position: absolute; 
    top: 9px; 
    color: #fff; 
    z-index: 2; 
    font-size: 1rem; 
    left: 4px; 
} 

.hovereffect .heart { 
    width: 80px; 
    height: 80px; 
    -webkit-transform: rotate(-45deg); 
    -moz-transform: rotate(-45deg); 
    -ms-transform: rotate(-45deg); 
    -o-transform: rotate(-45deg); 
    transform: rotate(-45deg); 
    -webkit-transform-origin: 0 100%; 
    -moz-transform-origin: 0 100%; 
    -ms-transform-origin: 0 100%; 
    -o-transform-origin: 0 100%; 
    transform-origin: 0 100%; 
    position: absolute; 
    right: -80px; 
    top: -25px; 
} 

.heart { 
    background-color: #f36a5a; 
    z-index: 1; 
} 

.heart:before { 
    content: "\f004"; 
    font: normal normal normal 14px/1 FontAwesome; 
    position: absolute; 
    top: 31px; 
    color: #fff; 
    z-index: 2; 
    font-size: 1.1rem; 
    left: 4px; 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.ala{ 
     width: 100%; 
     break-before: avoid; 
     break-after: avoid; 
     break-inside: avoid; 
     margin-top: 30px; 
    } 

    #container{ 
     column-count: 5; 
     column-gap: 0; 
    } 

這些代碼既出現在第一張圖片中，也出現在第二張圖片中，但沒有出現在其餘圖片中，有人可以告訴我我能做些什麼來糾正這個錯誤？

這個演示： https://jsfiddle.net/h69atvrc/

Answer 1

- >請附件fontawesome庫和鏈接的CSS在HTML - >還設置圖像路徑

.ala { 
 
    margin-top: 30px; 
 
} 
 

 
.clic::before { 
 
    color: #ffffff; 
 
    content: '\f00c'; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 14px; 
 
    left: 4px; 
 
    position: absolute; 
 
    top: 9px; 
 
    z-index: 2; 
 
} 
 

 
.clic { 
 
    border-color: #13b8dc; 
 
} 
 

 
.hovereffect { 
 
    cursor: default; 
 
    float: left; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 

 
.hovereffect .clic { 
 
    background-color: #13b8dc; 
 
    height: 80px; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: -30px; 
 
    transform: rotate(-45deg); 
 
    transform-origin: 0 100% 0; 
 
    width: 80px; 
 
    z-index: 1; 
 
} 
 

 
.hovereffect .heart { 
 
    height: 80px; 
 
    position: absolute; 
 
    right: -80px; 
 
    top: -25px; 
 
    transform: rotate(-45deg); 
 
    transform-origin: 0 100% 0; 
 
    width: 80px; 
 
} 
 

 
.heart { 
 
    background-color: #f36a5a; 
 
    z-index: 1; 
 
} 
 

 
.hovereffect img { 
 
    display: block; 
 
    position: relative; 
 
    transition: all 0.2s linear 0s; 
 
} 
 

 
.hovereffect .overlay { 
 
    background-color: rgba(0, 0, 0, 0.5); 
 
    height: 100%; 
 
    left: 0; 
 
    opacity: 0; 
 
    overflow: hidden; 
 
    position: absolute; 
 
    top: 0; 
 
    transition: all 0.2s ease-in-out 0s; 
 
    width: 100%; 
 
} 
 

 
.heart::before { 
 
    color: #ffffff; 
 
    content: '\f004'; 
 
    font-family: 'FontAwesome'; 
 
    font-size: 14px; 
 
    left: 4px; 
 
    position: absolute; 
 
    top: 31px; 
 
    transform: rotate(90deg); 
 
    z-index: 2; 
 
} 
 

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

<div class="ala col-lg-3 col-md-3 col-sm-6 col-xs-12 col-md-25"> 
 
    <span style="position: absolute;top: -25px;font-size:1rem;margin-left: -30px;color:#666;left: 50%;font-family:'Lato', sans-serif;display:block" class="rate"></span> 
 
    <div class="hovereffect clic"> 
 
    <div class="clic" style="display:block"></div> 
 
    <div class="heart"></div> 
 
    <img class="img-responsive" src="image01.jpg" alt="namePhoto"> 
 
    <div class="overlay"> 
 
     <a class="info test-popup-link" href="image02.jpg"></a> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <div class="btn-group" data-toggle="buttons"> 
 
     <label class="btn btn-primary check active"> 
 
        <input class="ck" name="ck[]" checked="" value="1" id="ck_1" type="checkbox"> <span class="che">Desmarcar</span> 
 
        </label> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

強大的文本