When designing web pages, it is sometimes necessary to include image collections for viewing. If you want to make some special Hover effects, you can refer to the expansion and contraction effects made by using the Flexbox feature.
Let's take a look at how to use Flexbox to make a beautiful Gallery stretch effect!
Create a Beautiful Gallery Scaling Effect: Step 1
First, create each image block in the image set, as shown in the following figure.
<div class="gallery-wrap">
<div class="item item-1"></div>
<div class="item item-2"></div>
<div class="item item-3"></div>
<div class="item item-4"></div>
<div class="item item-5"></div>
</div>
Create a Beautiful Gallery Scaling Effect: Step 2
Then set the CSS style. The first is the outermost gallery-wrap.
.gallery-wrap {
display: flex;
flex-direction: row;
width: 100%;
height: 150px;
}
You need to use the display:flex; property of the outer layer to become a flexible box first so that its child elements will become flexible items.
In the part of flex-direction: row, it declares the direction of the arrangement of its child elements.
Create a Beautiful Gallery Scaling Effect: Step 3
Then set the CSS style of each sub-item.
.item {
flex: 1;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: none;
transition: flex 0.8s ease;
&:hover{
flex: 7;
}
}
The flex properties are described below.
flex is an abbreviation, which contains three properties in sequence, flex-grow, flex-shrink, and flex-basis. If only one is set, it is flex-grow.
flex-grow: The stretchability of the element, which is a value. The extensibility of the current element when the space allocation is left, the default value is. If set to 0, there will be no scaling.
flex-shrink: The shrinkage of the element. The stretchability of the element is a numerical value. The shrinkage of the current component when the space allocation is not enough, the default value is. If set to 0, there will be no scaling.
flex-basis: The base value of the component, different unit values can be used.
Therefore, the larger the value of flex, the larger the proportion will be. In this example the initial state is flex:1, and when hovered it becomes flex:7. Therefore, you can create the effect of elastic expansion during hover!
Create a Beautiful Gallery Scaling Effect: Step 4
Finally, just add another block to your favorite picture and you're done! This example just differentiates the background color of the different blocks.
.item-1 {
background: #007aff;
}
.item-2 {
background: #4cd964;
}
.item-3 {
background: #f0ad4e;
}
.item-4 {
background: #dd524d;
}