elements appearing only in hover - html

Question

I'm having a problem with html5 and css3, something is happening as a bug when I do hover in the image. Was for him to appear as the first 2 but does not appear only appears quickly in the hover in the image and already algune would know to tell me why this? Below the first image and the system running normally and the second image and the hover in the image.
my 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>
My highlighted elements CSS code:
.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;
}
These are the codes that appear both in the first image and in the second, but that do not appear in the rest of the images, could someone tell me what I can do to correct this error?
this demo:
https://jsfiddle.net/h69atvrc/

Answer 1

-> please attachment fontawesome library and link css in html
-> also set image path
.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>
strong text