Html5 css3 element error does not stick to what was specified

Question

Html5 css3 element error does not stick to what was specified

Asked 7 years, 4 months ago

Viewed 55 times

0

how can I make so that the elements remain according to the first element of the column. because they are not as desired. in the first element I have two icones one of heart and one of check, but these do not repeat themselves in the respective images. they only appear quickly when you hover over the image. how do I solve this problem?

demo link: https://jsfiddle.net/h69atvrc/2/

h1, p{
	font-family: 'Lato', sans-serif;
}
h1{
	color: #fff;
}
p{
	font-size: 1.05rem;
  color: #666;
}

.img-thumbnail{
	display: inline-block;
    max-width: 100%;
    height: auto;
    line-height: 1.42857143;
    background-color: #fff;
   	border:none;
   	box-shadow: 0px 3px 13px rgba(0,0,0,0.6);
    border-radius: 1px;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.hovereffect {
  width:100%;
  height:100%;
  /*min-height: 250px;*/
  float:left;
  overflow:hidden;
  position:relative;
  text-align:center;
  cursor:default;
  /*box-shadow:0px 3px 13px rgba(0,0,0,0.6);*/
  border: 5px solid transparent;
}

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

.hovereffect img {
  display:block;
  position:relative;
  -webkit-transition:all .2s linear;
  transition:all .2s linear;
}

.hovereffect a.info {
  text-decoration:none;
  display:inline-block;
  text-transform:uppercase;
  color:#fff;
  opacity:0;
  filter:alpha(opacity=0);
  -webkit-transition:all .2s ease-in-out;
  transition:all .2s ease-in-out;
  margin:50px 0 0;
}
.info:focus{
	outline: 0px auto -webkit-focus-ring-color
}
.hovereffect:hover .overlay {
  opacity:1;
  filter:alpha(opacity=100);
}

.hovereffect:hover a.info {
  opacity:1;
  
}

.clic{
	border-color: #13B8DC;
}
.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 .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;
}
.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);

}
.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;
}
.fixo{
	position: fixed;
	top: 0 !important;
	z-index: 99;
  box-shadow: 0px 10px 30px -10px rgba(0, 0, 0, 0.4);
	background-color: rgba(255,255,255,0.9);
	-webkit-transition:all .3s ease-in-out;
  	transition:all .3s ease-in-out;
	width: 100%;
	height: 65px;
	left: 0; 
}
.badge{
  background-color: #6c6c6c;
  font-size: 11px;
  height: 20px;
}
.texto{
	margin-top: 13px;
	padding: 8px;
}
.h{
  top: 150px;
}
.men{
  top: 1rem;
}
#information{
    font-size: 1.4rem;
    position: absolute;
    right: 10px;
    top: -130px;
    color: #fff;
}
#information:hover, #information:focus, #information:active{
  cursor: pointer;
}
#log{
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  right: 10px;
}
#log:hover, #log:focus, #log:active{
  cursor: pointer;
}
.sweet-alert{
  border-radius: 1px;
}
.sweet-alert button{
  webkit-border-radius: 1px;
  border-radius: 1px;
}
.tooltip.left .tooltip-arrow{
  border-left-color: #fff;
}
.tooltip-inner{
  background-color: #fff;
  color: #000;
  font-weight: bold;
  font-size: 0.7rem;
}
.modal-content{
  border-radius: 2px;
}
.modal-header, .modal-footer{
  border: none;
}
.modal-body{
  padding: 0;
}
#load{
  margin-bottom: 1rem;
}
.star {
    visibility:hidden;
    cursor:pointer;
}
.star:before {
   content: "\f006";
   font:normal normal normal 22px/1 FontAwesome;
   position: absolute;
   top: 50%;
   color: #FBC02D;
   margin-top: -10px;
   left: 50%;
   margin-left: -50px;
   visibility:visible;
}
.star:checked:before {
   content: "\f005";
   font:normal normal normal 22px/1 FontAwesome;
   top: 50%;
   color: #FBC02D;
   margin-top: -10px;
   left: 50%;
   margin-left: -50px;
   position: absolute;
}
.fa-star:before{
  color: #FBC02D;
}
.lobibox-notify.lobibox-notify-error{
  background-color: rgb(245, 64, 58);
  border-color: rgb(245, 64, 58);
}
.lobibox-notify{
  box-shadow: none;
}
.lobibox-notify.notify-mini{
  min-height: 36px;
}
.lobibox-notify.notify-mini .lobibox-notify-title, .lobibox-notify.notify-mini .lobibox-notify-msg{
  font-family: 'Lato', sans-serif;
}
.comentarios:hover{
  cursor: pointer;
}
.paddi{
  padding: 30px;
}


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

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
  <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="http://www.kvraudio.com/i/300x250.jpg" alt="namePhoto">
      <div class="overlay">
        <a class="info test-popup-link" href="http://www.kvraudio.com/i/300x250.jpg"></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>
</div>

What the first picture has that the others have to have?

– Asura Khan

2017/02/10 at 21:55
Could be a little clearer p.f.v?

– Amadeu Antunes

2017/02/10 at 21:56
has those icons in the upper right and left corner.

– Leonardo Costa

2017/02/10 at 21:56
they have to have the icons keep, but there is something wrong that is not only keeping in the first and the lower of the first

– Leonardo Costa

2017/02/10 at 21:57
type if you hover over the img that are not equal the first will appear as that and to get well quickly

– Leonardo Costa

2017/02/10 at 22:00
Edit the question and explain right.

– Gilmar Santos

2017/02/10 at 22:15
Gilmarsantos edited the question

– Leonardo Costa

2017/02/10 at 22:19

Show 2 more comments

No answers

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.