将带有悬停图像的圆圈放置在特定位置

Question

我请您帮忙将圆圈放置在特定位置。 right now it looks like this

我想这样放置

like this

我知道有类似设置列的东西，但我不知道如何正确使用它。是否有可能设置行和列？ （我的意思是像在国际象棋游戏中一样？我可以在 E3 或 F7 上移动一些东西吗？ 谢谢你:)

对不起英文

.ih-item.square.effect13 {
  overflow: hidden;
}
.ih-item.square.effect13.colored .info {
  background: #1a4a72;
  background: rgba(26, 74, 114, 0.6);
}
.ih-item.square.effect13.colored .info h3 {
  background: rgba(12, 34, 52, 0.6);
}
.ih-item.square.effect13 .img {
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}
.ih-item.square.effect13 .info {
  background: #333333;
  background: rgba(0, 0, 0, 0.6);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.35s ease-in-out;
  -moz-transition: all 0.35s ease-in-out;
  transition: all 0.35s ease-in-out;
}
.ih-item.square.effect13 .info h3 {
  text-transform: uppercase;
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 10px;
  background: #111111;
  margin: 30px 0 0 0;
}
.ih-item.square.effect13 .info p {
  font-style: italic;
  font-size: 12px;
  position: relative;
  color: #bbb;
  padding: 20px 20px 20px;
  text-align: center;
}
.ih-item.square.effect13 a:hover .img {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
}
.ih-item.square.effect13 a:hover .info {
  visibility: visible;
  opacity: 1;
}

.ih-item.square.effect13.left_to_right .info {
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.ih-item.square.effect13.left_to_right a:hover .info {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.ih-item.square.effect13.right_to_left .info {
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.ih-item.square.effect13.right_to_left a:hover .info {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
}

.ih-item.square.effect13.top_to_bottom .info {
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
}
.ih-item.square.effect13.top_to_bottom a:hover .info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.ih-item.square.effect13.bottom_to_top .info {
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  -o-transform: translateY(100%);
  transform: translateY(100%);
}
.ih-item.square.effect13.bottom_to_top a:hover .info {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

<!-- From left and right -->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect13 from_left_and_right"><a href="#">
        <div class="img"><img src="img/4.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect13 from_left_and_right"><a href="#">
        <div class="img"><img src="img/4.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end From left and right -->
 
 
<!-- Top to bottom -->
<div class="row">
  <div class="col-sm-6">
 
    <!-- normal -->
    <div class="ih-item circle effect13 top_to_bottom"><a href="#">
        <div class="img"><img src="img/4.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end normal -->
 
  </div>
  <div class="col-sm-6">
 
    <!-- colored -->
    <div class="ih-item circle colored effect13 top_to_bottom"><a href="#">
        <div class="img"><img src="img/4.jpg" alt="img"></div>
        <div class="info">
          <div class="info-back">
            <h3>Heading here</h3>
            <p>Description goes here</p>
          </div>
        </div></a></div>
    <!-- end colored -->
 
  </div>
</div>
<!-- end Top to bottom -->

Answer 1

希望有帮助

		body {
			text-align: center;
		}
		
		#images-container {
			width: 300px;
			display: flex;
			margin: auto;
			align-items: center;
		}
		
		.col {
			width: 100%;
		}
		
		.circle-img {
			width: 50%;
			border-radius: 50%;
		}
		
		.center-left {
			position: relative;
			right: 50%;
		}
		
		.center-right {
			position: relative;
			left: 50%;
		}
		
		.square-img {
			width: 100%;
		}

	<div id="images-container">
		<div class="col">
			<img class="circle-img" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
			<img class="circle-img center-left" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
			<img class="circle-img" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
		</div>
		<div class="col">
			<img class="square-img" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
		</div>
		<div class="col">
			<img class="circle-img" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
			<img class="circle-img center-right" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
			<img class="circle-img" src="https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png">
		</div>

	</div>

Answer 2

如果您不反对非引导解决方案，
我想我会做那种事情：

body{
  background: mediumaquamarine;
}

.container {
  position: relative;
  height: 250px;
}

/* Here for the forms: */
.image{
  background-size: cover;
  background-image: url("https://vignette.wikia.nocookie.net/the-darkest-minds/images/4/47/Placeholder.png");
}

.circle {
  height: 60px;
  width: 60px;
  border: 10px solid #ddd;
  border-radius: 50%;
}

.box {
  height: 60px;
  width: 60px;
  border: 10px solid #ddd;
}


/* Here for the positionning: */
.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.around {
  padding-left: 200px;
  transform: translate(-50%, -50%) rotate(var(--deg));
}

.around:nth-of-type(1) { --deg: 60deg; }
.around:nth-of-type(2) { --deg: 120deg; }
.around:nth-of-type(3) { --deg: 180deg; }
.around:nth-of-type(4) { --deg: 240deg; }
.around:nth-of-type(5) { --deg: 300deg; }
.around:nth-of-type(6) { --deg: 360deg; }

/* This correct the rotation applied under */
.around .circle {
  transform: rotate(calc(-1 * var(--deg)));
}

<div class="container">
  <div class="center around"><div class="circle image"></div></div>
  <div class="center around"><div class="circle image"></div></div>
  <div class="center around"><div class="circle image"></div></div>
  <div class="center around"><div class="circle image"></div></div>
  <div class="center around"><div class="circle image"></div></div>
  <div class="center around"><div class="circle image"></div></div>
  <div class="center"><div class="box image"></div></div>
</div>

（我没有使用你的 HTML，因为它看起来很复杂！但是，你明白了。）

希望对你有帮助。