Display image within div

Question

Display image within div

Navigation

#1 by (1 votes)

1

I have a div an image. It would be necessary to display part of the image (centralized, for example) and decrease the size of the div.

If I give a hidden overflow with 50% width in some div above the image, it works, but there is a hole that does not line the other side.

Would it be possible to decrease the div without decreasing the image?

That's the original idea:

AndthisiswhatIasked:

.news-section .slide-item.right-margin {
  margin-right: 13px;
}

.news-section .slide-item.column-margin {
  padding-top: 10px;
  padding-bottom: 40px;
}

.news-section .slide-item .image-box {
  position: relative;
  display: table-cell;
}

figure {
  margin: 0;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: #2681c3;
}

.news-section .slide-item .image-box img {
  border-radius: 5px;
}

.news-section .slide-item .image-box:after {
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  content: '';
  border-radius: 5px;
  /* background: rgba(0, 0, 0, 0.3); */
}

.news-section .slide-item .date-box {
  position: absolute;
  width: 60px;
  height: 60px;
  right: 30px;
  top: 40px;
  background: #2681c3;
  z-index: 9;
  border-radius: 5px;
}

.news-section .slide-item .date-box h5 {
  font-size: 27px;
  font-family: 'Larsseit-Bold';
  line-height: 20px;
  color: #ffffff;
  margin-top: 10px;
  text-transform: uppercase;
}

.news-section .slide-item .date-box h5:before {
  color: #2681c3;
  content: "\f0da";
  font-family: FontAwesome;
  position: absolute;
  right: -8px;
  top: 10px;
  transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -webkit-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
}

.news-section .slide-item .date-box h5 span {
  font-size: 15px;
  font-family: 'Larsseit-Thin';
  color: #ffffff;
}

.news-section .slide-item .inner-box {
  position: relative;
  display: table-cell;
  left: -20px;
  vertical-align: top;
  padding-top: 24px;
}

.news-section .slide-item .inner-box .info-outer {
  position: relative;
  /* padding: 30px 16px; */
  margin-right: -20px;
}

.corpo_blog {
  padding: 16px 16px 30px 16px;
  background: #ffffff;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
}

.news-section .slide-item .inner-box .info-outer h5 {
  font-size: 20px;
  /* color: #2e2e2e; */
  letter-spacing: .5px;
  text-transform: uppercase;
  font-family: 'Larsseit-Bold';
  text-align: initial;
  display: -webkit-box;
  height: 44px;
  line-height: 22px;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cor_titulos {
  color: #2e2e2e;
}

.news-section .inner-box .info-outer .link-btn {
  margin-top: 48px;
  text-align: right;
}

.news-section .inner-box .info-outer .link-btn a {
  line-height: 24px;
  text-transform: capitalize;
  transition: all 500ms ease;
  letter-spacing: .5px;
  font-family: 'Larsseit-Bold';
  font-size: 15px;
  text-align: right;
  color: #2681c3;
  text-transform: uppercase;
}

.news-section .inner-box .info-outer h6 {
  font-size: 17px;
  /* color: #2e2e2e; */
  margin-top: 10px;
  font-family: 'Larsseit-Light';
  text-align: initial;
  display: -webkit-box;
  height: 88px;
  line-height: 22px;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">


<div class="news-section style-two">
  <div class="row">
    <div class="col-md-6 col-sm-12 col-xs-12">
      <div class="slide-item column-margin right-margin">
        <div class="image-box figure_box">
          <figure class="figure_blog">
            <a href="#"><img src="https://files.incrivel.club/files/news/part_40/405910/preview-13524560-650x341-98-1519527991.jpg"alt=""></a>
          </figure>
          <div class="date-box text-center">
            <h5>03<br><span>Jul</span></h5>
          </div>
        </div>
        <div class="inner-box">
          <div class="info-outer">
            <a href="#">
              <div class="corpo_blog">
                <h5 class="cor_titulos">Carga de pneus avaliada em cerca de R$ 500 mil é recuperada pela PRF/AL</h5>
                <h6 class="cor_titulos">Um caminhão com carga avaliada em aproximadamente R$ 500 mil foi recuperado pela Polícia Rodoviária Federal (PRF/AL) na madrugada desta sexta-feira (29), nas proximidades do km 84 da BR-101, entrada da Empresa Britex Minerações, no município
                  de Rio Largo/AL. Segundo a PRF, houve intensa troca de tiros com os suspeitos que estavam com a carga, mas ninguém ficou ferido.Ainda de acordo com a polícia, a denúncia chegou através da Central de Informações, que recebeu uma ligação
                  da Empresa de Rastreamento informando que havia perdido o sinal de rastreamento de um dos seus veículos. Ao receberem a informação, as equipes se deslocaram para averiguação.Ao chegarem ao local, o caminhão estava com as portas abertas,
                  o motorista sendo mantido refém por um indivíduo armado e outros retirando a carga do veículo. Quando perceberem a chegada das viaturas, os assaltantes começaram a efetuar disparos de arma de fogo em direção aos policiais, que revidaram
                  a agressão. Após a troca de tiros, os assaltantes fugiram em direção a um matagal.O motorista do caminhão informou à polícia que foi rendido por três homens armados em um posto de combustível localizado às margens da BR-101, no município
                  de Messias/AL. Ele informou ainda que, na ocasião, havia outro veículo dando cobertura.A mercadoria que estava sendo transportada - cerca de 550 pneus - foi recuperada intacta. Além disso, um aparelho utilizado pelos assaltantes para
                  bloquear o sinal de rastreamento do veículo foi apreendido pelos policiais. O veículo recuperado e o aparelho apreendido, bem como a vítima, um senhor de 56 anos, foram encaminhados à Delegacia de Roubos e Furtos de veículos em Maceió.</h6>
              </div>
            </a>
            <div class="link-btn">
              <a href="#">saiba mais</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

css css3

asked by anonymous 10.07.2018 / 17:08

1 answer

How to use Select onchange to not show parameters in the url? Some dynamic way to select IDs with Javascript

score 1 · Accepted Answer

Rogerio I understand that when you put the smaller image is a soft space between the image and the box with the correct information? If so, I think this css below can help.

But regardless of this you will have to think hard about this structure so that it works responsibly right. You could have used display:flex instead of display:table-cell that I believe is making things difficult ...

The model I made was type taking the tag <figure> and putting it in a width in PX (I just managed to make it work so as to move as little as possible in your css) with Overflow:hidden . I also put transform:translateX(-25%) to control which part of the image you want to display.

     .news-section .slide-item.right-margin {
      margin-right: 13px;
    }
    
    .news-section .slide-item.column-margin {
      padding-top: 10px;
      padding-bottom: 40px;
    }
    
    .news-section .slide-item .image-box {
      position: relative;
      display: table-cell;
    }
    
    figure {
      margin: 0;
    }
    
    a {
      text-decoration: none;
      cursor: pointer;
      color: #2681c3;
    }
    
    .news-section .slide-item .image-box img {
      border-radius: 5px;
    }
    
    .news-section .slide-item .image-box:after {
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;
      content: '';
      border-radius: 5px;
      /* background: rgba(0, 0, 0, 0.3); */
    }
    
    .news-section .slide-item .date-box {
      position: absolute;
      width: 60px;
      height: 60px;
      right: 30px;
      top: 40px;
      background: #2681c3;
      z-index: 9;
      border-radius: 5px;
    }
    
    .news-section .slide-item .date-box h5 {
      font-size: 27px;
      font-family: 'Larsseit-Bold';
      line-height: 20px;
      color: #ffffff;
      margin-top: 10px;
      text-transform: uppercase;
    }
    
    .news-section .slide-item .date-box h5:before {
      color: #2681c3;
      content: "\f0da";
      font-family: FontAwesome;
      position: absolute;
      right: -8px;
      top: 10px;
      transition: all 500ms ease;
      -moz-transition: all 500ms ease;
      -webkit-transition: all 500ms ease;
      -ms-transition: all 500ms ease;
      -o-transition: all 500ms ease;
    }
    
    .news-section .slide-item .date-box h5 span {
      font-size: 15px;
      font-family: 'Larsseit-Thin';
      color: #ffffff;
    }
    
    .news-section .slide-item .inner-box {
      position: relative;
      display: table-cell;
      left: -20px;
      vertical-align: top;
      padding-top: 24px;
    }
    
    .news-section .slide-item .inner-box .info-outer {
      position: relative;
      /* padding: 30px 16px; */
      margin-right: -20px;
    }
    
    .corpo_blog {
      padding: 16px 16px 30px 16px;
      background: #ffffff;
      border-radius: 5px;
      border: 1px solid #e5e5e5;
    }
    
    .news-section .slide-item .inner-box .info-outer h5 {
      font-size: 20px;
      /* color: #2e2e2e; */
      letter-spacing: .5px;
      text-transform: uppercase;
      font-family: 'Larsseit-Bold';
      text-align: initial;
      display: -webkit-box;
      height: 44px;
      line-height: 22px;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    .cor_titulos {
      color: #2e2e2e;
    }
    
    .news-section .inner-box .info-outer .link-btn {
      margin-top: 48px;
      text-align: right;
    }
    
    .news-section .inner-box .info-outer .link-btn a {
      line-height: 24px;
      text-transform: capitalize;
      transition: all 500ms ease;
      letter-spacing: .5px;
      font-family: 'Larsseit-Bold';
      font-size: 15px;
      text-align: right;
      color: #2681c3;
      text-transform: uppercase;
    }
    
    .news-section .inner-box .info-outer h6 {
      font-size: 17px;
      /* color: #2e2e2e; */
      margin-top: 10px;
      font-family: 'Larsseit-Light';
      text-align: initial;
      display: -webkit-box;
      height: 88px;
      line-height: 22px;
      -webkit-line-clamp: 4;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    figure {
      max-width: 325px;
      overflow: hidden;
    }
    figure a img {
      transform: translateX(-25%);
    }

  <link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
  
  <div class="news-section style-two">
      <div class="row">
        <div class="col-md-6 col-sm-12 col-xs-12">
          <div class="slide-item column-margin right-margin">
            <div class="image-box figure_box">
              <figure class="figure_blog">
                <a href="#"><img src="https://files.incrivel.club/files/news/part_40/405910/preview-13524560-650x341-98-1519527991.jpg"alt=""></a>
              </figure>
              <div class="date-box text-center">
                <h5>03<br><span>Jul</span></h5>
              </div>
            </div>
            <div class="inner-box">
              <div class="info-outer">
                <a href="#">
                  <div class="corpo_blog">
                    <h5 class="cor_titulos">Carga de pneus avaliada em cerca de R$ 500 mil é recuperada pela PRF/AL</h5>
                    <h6 class="cor_titulos">Um caminhão com carga avaliada em aproximadamente R$ 500 mil foi recuperado pela Polícia Rodoviária Federal (PRF/AL) na madrugada desta sexta-feira (29), nas proximidades do km 84 da BR-101, entrada da Empresa Britex Minerações, no município
                      de Rio Largo/AL. Segundo a PRF, houve intensa troca de tiros com os suspeitos que estavam com a carga, mas ninguém ficou ferido.Ainda de acordo com a polícia, a denúncia chegou através da Central de Informações, que recebeu uma ligação
                      da Empresa de Rastreamento informando que havia perdido o sinal de rastreamento de um dos seus veículos. Ao receberem a informação, as equipes se deslocaram para averiguação.Ao chegarem ao local, o caminhão estava com as portas abertas,
                      o motorista sendo mantido refém por um indivíduo armado e outros retirando a carga do veículo. Quando perceberem a chegada das viaturas, os assaltantes começaram a efetuar disparos de arma de fogo em direção aos policiais, que revidaram
                      a agressão. Após a troca de tiros, os assaltantes fugiram em direção a um matagal.O motorista do caminhão informou à polícia que foi rendido por três homens armados em um posto de combustível localizado às margens da BR-101, no município
                      de Messias/AL. Ele informou ainda que, na ocasião, havia outro veículo dando cobertura.A mercadoria que estava sendo transportada - cerca de 550 pneus - foi recuperada intacta. Além disso, um aparelho utilizado pelos assaltantes para
                      bloquear o sinal de rastreamento do veículo foi apreendido pelos policiais. O veículo recuperado e o aparelho apreendido, bem como a vítima, um senhor de 56 anos, foram encaminhados à Delegacia de Roubos e Furtos de veículos em Maceió.</h6>
                  </div>
                </a>
                <div class="link-btn">
                  <a href="#">saiba mais</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>