Menu
I have been trying to create a gallery app where user mouseover on div and it gets bigger but rest remain the same height. You can see that happening in the example of this codepen snippet.
Problem: The problem is when I mouseover to some divs, it doesn't arranged properly. Can anyone help me with make it like so that no divs go out of the parent div and fill out the parent div.
$( '.preview' ).on( 'mouseover', function() {
$( '.preview' ).removeClass( 'active' );
$( this ).addClass( 'active' )
}).each( function( i, el ) {
$( el ).append( '<span>' + i + '</span>' )
});body {
font-family: sans-serif;
}
* {
box-sizing: border-box;
}
.main {
width: 400px;
height: 500px;
background: red;
font-size: 0;
}
.preview {
position: relative;
width: 100px;
height: 100px;
background: white;
border: 1px solid grey;
transition: width 1s;
display: inline-block;
white-space: nowrap;
vertical-align: top;
float: left;
}
.active {
width: 200px;
height: 200px;
}
.preview>span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: black;
font-size: 32px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="preview active"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
</div>
921
If you want the two div s to be displayed one above the other, the simplest answer is to remove the float: left; from the css declaration, as this causes them to collapse to the size of their contents (or the css defined size), and, well float up against each other.
The css rule: white-space: nowrap; will prevent your lines wrapping. Set a width of the error div to 100% and it will automatically fill the space available.
if you set width:500px; and height:300px; (or whatever size you want) the div should stay the same size. Also, you can set overflow:hidden; so that if whatever is in the div goes beyond those bounds, it is not shown, and does not resize the div. Show activity on this post. Try this one.
Three or more different div can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. float:left; This property is used for those elements(div) that will float on left side.
You can use CSS Grid Layout Module:
A Complete Guide to Grid
Example:
$( '.preview' ).on( 'mouseover', function() {
$( '.preview' ).removeClass( 'active' );
$( this ).addClass( 'active' )
}).each( function( i, el ) {
$( el ).append( '<span>' + i + '</span>' )
});.main {
width: 400px;
height: 500px;
background-color: red;
/* CSS Grid */
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto auto auto;
grid-gap: 0
}
.preview {
border: 1px solid #ddd;
background-color: #fff;
text-align: center;
font-size: 32px;
transition: all 1s
}
.active{
grid-column: span 2;
grid-row: span 2;
background-color: rgba(255, 255, 255, .9)
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main">
<div class="preview active"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
<div class="preview"></div>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
