размещение кругов с наведенными изображениями в определенных положениях - PullRequest
Новая
       22

размещение кругов с наведенными изображениями в определенных положениях

0 голосов
/ 31 мая 2018

Прошу вас помочь с размещением кружков на определенных позициях. сейчас это выглядит так

, и я бы хотел разместить его так

вот так

Я знаю тамэто что-то вроде установки столбцов, но я не знаю, как правильно его использовать.Есть ли возможность установить строку и столбец?(Я имею в виду, как в шахматах? Могу ли я что-нибудь переместить на 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 -->

Ответы [ 3 ]

0 голосов
/ 31 мая 2018

Если вы не против решения, не основанного на начальной загрузке,
Я думаю, я сделаю такие вещи: 

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, потому что он кажется сложным! Но вы видите идею.)

Надеюсь, это поможет.

0 голосов
/ 31 мая 2018

Это то, что я пытался сделать.У меня уже есть мое квадратное изображение, и оно выглядит так: 

<div class="container">
        <img class="img-fluid mb-5 d-block mx-auto" src="img/profile.png" alt="">

      </div>

, поэтому еще один вопрос, и я не могу с этим справиться, я не знаю, как связать это с этим кодом парящих кружков ..

0 голосов
/ 31 мая 2018

надеюсь, что его помощь 

		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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...