Elemente nur in Hover

Question

Ich habe ein Problem mit HTML5 und CSS3, etwas passiert als ein Fehler, wenn ich im Bild schweben. War das für ihn wie die ersten 2 erscheinen aber nicht erscheint nur schnell im Schwebeflug im Bild und schon würde Algune wissen, warum das? Unterhalb des ersten Bildes und des Systems läuft normal und das zweite Bild und der Hover im Bild.

meinen Code 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> 

Meine Elemente CSS-Code hervorgehoben:

.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; 
    } 

Dies sind die Codes, die sowohl im ersten Bild als auch im zweiten Bild erscheinen, die aber nicht im Rest der Bilder erscheinen. Könnte mir jemand sagen, was ich tun kann, um diesen Fehler zu korrigieren?

diese Demo: https://jsfiddle.net/h69atvrc/

Answer 1

-> bitte Befestigung fontawesome Bibliothek und Link CSS in HTML -> auch Pfad gesetzt Bild

.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>

starken Text