元素只出现在悬停中

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>

强大的文本