Увеличьте разделение с определенным классом при зависании

Question

Я хотел бы создать подразделение в HTML, которое - на hover становится немного больше и расширяет существующее разделение на новое.

Я полагаю, что для этого нужно использовать JavaScript, так как есть функция onmouseover.

Может ли кто-нибудь вести меня, какую информацию искать или где найти соответствующие структуры кода.

Пример того, что я ищу is here:

Существует окно, которое отображает новое содержимое, когда один парит над ним.

Answer 1

В вашем примере используется transform: scale(), чтобы увеличить масштаб.

.box { 
    width: 100%; 
    min-height: 200px; 

    padding: 5px; 

    background: #fff; 
    border: 2px solid crimson; 

    // scale the box from horizontal center, and vertical top 
    transform-origin: 50% 0; 
    -webkit-transform-origin: 50% 0; 

    // apply a transition 
    transition: transform .5s ease-out; 
    -webkit-transition: transform .5s ease-out; 
} 

.box:hover { 
    z-index: 20; 

    transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
} 

Примером этого: https://jsfiddle.net/o5qwt01s/3/

Убедитесь поместить коробку внутри контейнера, чтобы предотвратить коробки от прыгали по наведению.

Другое решение - обновить ширину/высоту окна до более высокого значения при наведении. В этом случае мы должны поместить ящик absolute внутри его контейнера. Недостатком является то, что вы должны указать height для своего контейнера, а также для коробки.

.col { 
    position: relative; 
    width: 30%; 
    height :200px; 

    display: inline-block; 
    vertical-align: top; 

    margin: 10px; 

} 

.box { 
    position: absolute; 
    top: 0; 
    width: 100%; 
    height: 200px; 

    padding: 5px; 

    background: #fff; 
    border: 2px solid crimson; 

    transition: height .2s ease-out; 
    -webkit-transition: height .2s ease-out; 
} 

.box:hover { 
    z-index: 20; 
    height: 300px; 
} 

https://jsfiddle.net/24wrm8zo/3/

Answer 2

Нет необходимости в JavaScript, это может быть сделано только с помощью CSS:

.parent { 
 
    width: 100px; 
 
    height: 100px; 
 
    background-color: grey; 
 
    padding: 10px; 
 
    -webkit-transition: all 0.5s; /* Safari */ 
 
    transition: all 0.5s; 
 
} 
 
.parent:hover { 
 
    width: 120px; 
 
    height: 120px 
 
} 
 

 
.child { 
 
    visibility: hidden; 
 
    } 
 

 

 
.parent:hover .child { 
 
    visibility: visible; 
 
    }

<div class="parent">Content 
 
    <div class="child">More content</div> 
 
</div>

Answer 3

Что-то вроде этого?

fiddle

.tile { 
 
    width: 100px; 
 
    background: lightgrey; 
 
    float: left; 
 
    margin: 6px; 
 
    border: 3px solid green; 
 
    transition: transform .2s ease-in; 
 
} 
 

 
.tile div { 
 
    width: 100%; 
 
    height: 80px; 
 
} 
 

 
.tile span { 
 
    display: none; 
 
    width: 100%; 
 
    height: 40px; 
 
    background: white; 
 
} 
 

 
.tile:hover { 
 
    transform: scale(1.125); 
 
} 
 

 
.tile:hover span { 
 
    display: block; 
 
}

<div class="tile"> 
 
    <div>Normal content</div> 
 
    <span>New content</span> 
 
</div> 
 
<div class="tile"> 
 
    <div>Normal content</div> 
 
    <span>New content</span> 
 
</div> 
 
<div class="tile"> 
 
    <div>Normal content</div> 
 
    <span>New content</span> 
 
</div>

Answer 4

.box {width:300px;height:200px;overflow:hidden;background-color:blue;} 
 
.text{height:200px;padding:20px;margin:auto;color:white;box-sizing:border-box} 
 
.secret-text { height:200px;margin:auto;background-color:red;} 
 
.box:hover{height:auto}

<div class="box"> 
 
<div class="text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div> 
 
<div class="secret-text">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."</div> 
 
</div>

Я не думаю, что вам нужно JavaScript для этого. Вы скрываете контейнер «awards-jobs» в данном примере с отображением: none или с определенной высотой в родительском div и переполнении: hidden. Затем при наведении родительского div вы устанавливаете отображение: block или height: auto соответственно.

Answer 5

Использование JQuery и CSS мы можем достичь этого

$(".img or div ").hover(function() {  
    $(this).closest(".img").css("z-index", 1);  
    $(this).animate({ height: "200", width: "200", left: "-=55", top: "-=55" }, "fast");  
}, function() {  
    $(this).closest(".img").css("z-index", 0);  
    $(this).animate({ height: "90", width: "90", left: "+=55", top: "+=55" }, "fast");  
}); 

, если вам нужно больше информации попробуйте найти содержание, как расширение содержания Div при наведении курсора мыши.