Как показать Link / DIV при наведении курсора вверх? - PullRequest
Новая
       36

Как показать Link / DIV при наведении курсора вверх?

1 голос
/ 15 октября 2019

Я пытаюсь создать раздел команды на веб-сайте. У меня есть Div с изображением и именем человека. Когда я наведите курсор на имя, я бы хотел, чтобы на его месте появилась ссылка и переместилось бы Имя вверх. Примерно так (раздел TEAM): https://www.templatemonster.com/de/demo/55809.html

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

#stuff {
    position: absolute;
    top: 100px;
    opacity: 0.0;
    -webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    transition: all 500ms ease-in-out;
}
#hover {
    width:80px;
    height:20px;
    background-color:green;
    margin-top: 50px;
    margin-bottom:15px;
}
#hover:hover {
    margin-top:25px;
    margin-bottom: 25px;
    opacity: 1.0;
}
#stuff:hover {

    opacity: 1.0;
}



<link rel="stylesheet" type="text/css" href="main.css">
<section>

    <div id="hover">Hover</div>
<div id="stuff">stuff</div>

Есть простое решение с помощью CSS и / или Bootstrap?

1 Ответ

0 голосов
/ 15 октября 2019

Я сделал пример, используя просто CSS. 

section {
  margin:5px auto;	
}

.hover-div {
  color:#FFF;
  width:200px;
}

.hover-div .stuff {
  background-color:#F00;
  height:100px;
  margin-top:0;
  position:relative;
  width:100%;	
  z-index:2;

  -webkit-transition:margin-top 0.3s;
      transition:margin-top 0.3s;
}

.hover-div .stuff-hidden {
  background-color:#00F;
  height:0;
  width:100%;

  -webkit-transition:height 0.3s;
      transition:height 0.3s;	
}

.hover-div:hover .stuff {
  margin-top:-40px;
}

.hover-div:hover .stuff-hidden {
  height:40px;
}

.image {
  background-color:#0F0;
  height:100px;
  text-align:center;
  width:100%;
}
<section>
  <div class="image">image</div> 
	<div class="hover-div">
        <div class="stuff">Stuff</div>
        <div class="stuff-hidden">Hidden stuff</div>
    </div>
</section>
...