Как разместить текст на стороне изображения?

Question

У меня есть этот код ниже:

.img-container{
  overflow: hidden;
  border-radius: 4px;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

Мне нужно всплыть <img> справа, но overflow: hidden; на css не позволяет мне это сделать ...

Как я могу решить это?.

Answer 1

Ваш .img-container - это DIV, который расширится до 100% ширины, если вы не укажете иначе.Добавьте float: right, и он будет занимать только ширину оборачиваемого изображения.

.img-container{
  overflow: hidden;
  border-radius: 4px;
  float:right;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

Answer 2

Есть несколько способов сделать это, но я лично предпочитаю гибкий подход:

div.mb-3 {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.img-container{
  overflow: hidden;
  border-radius: 4px;
}
    
.img-container img{
  -webkit-transition: -webkit-transform 1.2s ease;
  transition: transform 1.2s ease;
 }
    
 .img-container:hover img{
   -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

<div class="col-12 col-md-6 col-lg-8">
      <div class="mb-3 mb-md-0">
    
        <div class="img-container">
          <a href="index.php?post=#"><img  style="float: right; width: 400px" src="https://www.revistaplaneta.com.br/wp-content/uploads/sites/3/2017/05/5_pl530_volta8.jpg" alt="#" class="card-img-top"></a>
        </div>
    
        <div class="card-body">
          <h3 class="cardTitleID"><a href="index.php?post=#" class="card-title">title</a></h3>
          <p class="card-text text-muted">text</p>
        </div>
        
      </div>
    </div>

Answer 3

Вместо того, чтобы создавать <img> float, просто объявите style="display:inline-block;" в ваших div, которые имеют классы "img-container" и "card-body"