Блог

Главная - Вопросы по программированию - Как заставить изображение парить вне контейнера span

Как заставить изображение парить вне контейнера span

#html #css

#HTML #css

Вопрос:

 .wrap {
  position: relative;
  width: 80vmin;
  height: 80vmin;
  margin: 0 auto;
  background: inherit;
  transform: scale(0.2) translatez(0px);
  opacity: 0;
  transition: transform .5s, opacity .5s;
}

a {
  position: absolute;
  left: 0;
  top: 0;
  width: 47.5%;
  height: 47.5%;
  overflow: hidden;
  transform: scale(.5) translateZ(0px);
  background: #242943;
}

a div {
  height: 100%;
  background-size: cover;
  opacity: .5;
  transition: opacity .5s;
  border-radius: inherit;
}

a:nth-child(1) {
  border-radius: 40vmin 0 0 0;
  transform-origin: 110% 110%;
  transition: transform .4s .15s;
  background: #a23658;
}

a:nth-child(1) div {
  background-image: url('p10.jpg');
}

a:nth-child(5) {
  width: 55%;
  height: 55%;
  left: 22.5%;
  top: 22.5%;
  border-radius: 50vmin;
  box-shadow: 0 0 0 5vmin #242943;
  transform: scale(1);
}

a:nth-child(5) div {
  background-image: url('groupphoto.jpg');
}

span {
  position: relative;
  display: block;
  top: 45vmin;
  width: 7vmin;
  height: 7vmin;
  background-image: url('squarelogo.png');
  margin-left: auto;
  margin-right: auto;
}

span span {
  position: relative;
  width: 60%;
  height: 1px;
}

span span:after {
  top: 1.5vmin;
}

span:hover .wrap,
.wrap:hover {
  transform: scale(.81) translateZ(0px);
  opacity: 1;
}

span:hover .wrap a,
.wrap:hover a {
  transform: scale(1) translatez(0px);
}

a:hover div {
  opacity: 1;
  transform: translatez(0px);
}  
 <span><span></span></span>
<div class="wrap">

  <a href="Architecture.html" title="Architecture">
    <div>
      <div></div>
    </div>
  </a>
  <a href="3D amp; Animation.html" title="3D amp; Animation">
    <div></div>
  </a>
  <a href="Graphics.html" title="Graphics">
    <div></div>
  </a>
  <a href="Marketing.html" title="Marketing">
    <div></div>
  </a>
  <a href="AboutUS.html" title="About Us">
    <div></div>
  </a>

</div>

Вот мой код. Всего у меня 5 «энных дочерних элементов». Я пытаюсь написать код, который делает так, что при наведении курсора мыши на n-й дочерний элемент появляется изображение ЗА пределами контейнера span / span. Я пробовал писать html-код для него в классах и все такое. Я не думаю, что я делаю это правильно и, похоже, сталкиваюсь с кирпичной стеной. Кто-нибудь может мне помочь?

Комментарии:

1. Я только удалил другие n-е дочерние элементы, чтобы получить больше места, чтобы задать этот вопрос в stackoverflow

Ответ №1:

1 — НЕТ JAVASCRIPT

Предполагая, что вы не хотите использовать Javascript, используя селекторы CSS, вы можете достичь того, что ищете. В моем примере я использую divs вместо изображений для наглядности.

HTML:

 <span class="span1"> SPAN 1 </span>
<div class="hide1">I am an image shown when span 1 is hovered</div>
<br>
<span class="span2"> SPAN 2 </span>
<div class="hide2">I am an image shown when span 2 is hovered</div>

CSS:

 .hide1, .hide2{
  display: none;
}

.span1:hover   .hide1 {
  display: block;
  color: blue;
}

.span2:hover   .hide2 {
  display: block;
  color: blue;
}

Вот JSFiddle

2 — РЕШЕНИЕ НА JAVASCRIPT

Теперь, если вы готовы использовать JavaScript, все намного проще и гибче:

HTML:

 <div>
  <span onmouseover="image1()" onmouseout="imageout()" id="span1">1</span>
  <span onmouseover="image2()" onmouseout="imageout()" id="span2">2</span>
  <div id="image1">IMAGE 1</div>
  <div id="image2">IMAGE 2</div>
</div>

CSS:

 #span1, #span2{
  cursor: defau<
}

#image1, #image2{
  display: none;
}

JavaScript:

 var img1 = document.getElementById('image1');
var img2 = document.getElementById('image2');

function image1(){
    img1.style.display = "inline-block";
}

function image2(){
    img2.style.display = "inline-block";
}

function imageout(){
    img1.style.display = "none";
  img2.style.display = "none";
}

Вот JSFiddle