Изменение ширины колонки в grid контейнере при наведении
Как заставить колонки в grid масштабироваться при наведении, код выводит программа поэтому нужно отталкиваться от этого кода css, ховер добавил я.
#FlexGrid2 {
display: grid;
background-color: transparent;
background-image: none;
border: 0px solid #CCCCCC;
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 0px;
grid-column-gap: 1px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
grid-template-rows: auto;
grid-template-areas: "col1 col2 col3 col4 col5 col6 col7";
overflow: hidden;
align-items: center;
}
#FlexGrid2 > div {
display: flex;
background-color: transparent;
background-image: none;
border: 0px solid #FFFFFF;
padding: 0;
-webkit-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-justify-content: space-around;
justify-content: space-around;
-webkit-align-items: center;
align-items: center;
-webkit-align-content: center;
align-content: center;
width: 100%;
height: 100%;
transition: all .3s linear;
}
#FlexGrid2 img {
margin: 0;
vertical-align: top;
border: 0px solid #000000;
box-sizing: border-box;
padding: 0;
display: block;
width: 100%;
height: auto;
max-width: 270px;
margin-left: auto;
margin-right: auto;
vertical-align: top;
}
#FlexGrid2 > div:hover{
cursor: pointer;
width: 200%;
margin: -50% 0;
}<div id="FlexGrid2">
<div class="col1">
<div id="wb_Image1">
<img src="https://images.unsplash.com/photo-1607022505609-a8978bdbe015?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image1">
</div>
</div>
<div class="col2">
<div id="wb_Image2">
<img src="https://images.unsplash.com/photo-1607801354062-c7520503e178?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image2">
</div>
</div>
<div class="col3">
<div id="wb_Image3">
<img src="https://images.unsplash.com/photo-1608755374285-1700d287bc52?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image3">
</div>
</div>
<div class="col4">
<div id="wb_Image4">
<img src="https://images.unsplash.com/photo-1608112906300-03db6a5af97c?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image4">
</div>
</div>
<div class="col5">
<div id="wb_Image5">
<img src="https://images.unsplash.com/photo-1608156618704-ab992d2e5152?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image5">
</div>
</div>
<div class="col6">
<div id="wb_Image6">
<img src="https://images.unsplash.com/photo-1608571785041-22349e5bfdb9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image6">
</div>
</div>
<div class="col7">
<div id="wb_Image7">
<img src="https://images.unsplash.com/photo-1609439408825-b2a24e29871f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image7">
</div>
</div>
</div>Ответы (2 шт):
Автор решения: CbIPoK2513
→ Ссылка
Как вариант
body {
display: flex;
align-items: center;
height: 100vh;
margin: 0;
overflow: hidden;
}
#FlexGrid2 {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
#FlexGrid2 > div {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
transition: all .3s linear;
}
#FlexGrid2 img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#FlexGrid2 > div:hover {
width: 200%;
margin: -50% 0;
}<div id="FlexGrid2">
<div class="col1">
<div id="wb_Image1">
<img src="https://images.unsplash.com/photo-1607022505609-a8978bdbe015?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image1">
</div>
</div>
<div class="col2">
<div id="wb_Image2">
<img src="https://images.unsplash.com/photo-1607801354062-c7520503e178?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image2">
</div>
</div>
<div class="col3">
<div id="wb_Image3">
<img src="https://images.unsplash.com/photo-1608755374285-1700d287bc52?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image3">
</div>
</div>
<div class="col4">
<div id="wb_Image4">
<img src="https://images.unsplash.com/photo-1608112906300-03db6a5af97c?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image4">
</div>
</div>
<div class="col5">
<div id="wb_Image5">
<img src="https://images.unsplash.com/photo-1608156618704-ab992d2e5152?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image5">
</div>
</div>
<div class="col6">
<div id="wb_Image6">
<img src="https://images.unsplash.com/photo-1608571785041-22349e5bfdb9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image6">
</div>
</div>
<div class="col7">
<div id="wb_Image7">
<img src="https://images.unsplash.com/photo-1609439408825-b2a24e29871f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image7">
</div>
</div>
</div>
Автор решения: Михаил Камахин
→ Ссылка
С js (только тут надо отказаться от анимации с помощью transition и использовать requestAnimationFrame и не будет лагов):
const gridItems = Array.from(document.querySelectorAll('#FlexGrid2 > *'));
let widthItem = document.querySelector('#FlexGrid2 > *:not(.active)').offsetWidth;
for (let i = 0; i < gridItems.length; i++) {
const item = gridItems[i];
const arrayNotItem = gridItems.slice();
arrayNotItem.splice(i, 1);
item.addEventListener('mouseover', (e) => {
e.preventDefault();
item.classList.add('active');
arrayNotItem.forEach(offItem => {
offItem.classList.add('off');
});
});
item.addEventListener('mouseout', (e) => {
e.preventDefault();
item.classList.remove('active');
arrayNotItem.forEach(offItem => {
offItem.classList.remove('off');
});
});
}
window.addEventListener('resize', (e) => {
widthItem = document.querySelector('#FlexGrid2 > *:not(.active)').offsetWidth;
});*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#FlexGrid2 {
display: flex;
}
#FlexGrid2 > * {
flex: 1;
display: flex;
transition-property: transform, filter, flex, width;
transition-duration: 0.5s;
transition-timing-function: linear;
transform-origin: center top;
}
#FlexGrid2 > * + * {
margin-left: 4px;
}
#FlexGrid2 > *.active {
cursor: pointer;
width: 100%;
z-index: 1;
}
#FlexGrid2 > *.off {
filter: grayscale(100%);
flex: 0.5;
}
#FlexGrid2 > *:first-child {
transform-origin: left top;
}
#FlexGrid2 > *:last-child {
transform-origin: right top;
}<div id="FlexGrid2">
<div class="col1">
<div id="wb_Image1">
<img src="https://images.unsplash.com/photo-1607022505609-a8978bdbe015?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image1">
</div>
</div>
<div class="col2">
<div id="wb_Image2">
<img src="https://images.unsplash.com/photo-1607801354062-c7520503e178?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image2">
</div>
</div>
<div class="col3">
<div id="wb_Image3">
<img src="https://images.unsplash.com/photo-1608755374285-1700d287bc52?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image3">
</div>
</div>
<div class="col4">
<div id="wb_Image4">
<img src="https://images.unsplash.com/photo-1608112906300-03db6a5af97c?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image4">
</div>
</div>
<div class="col5">
<div id="wb_Image5">
<img src="https://images.unsplash.com/photo-1608156618704-ab992d2e5152?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image5">
</div>
</div>
<div class="col6">
<div id="wb_Image6">
<img src="https://images.unsplash.com/photo-1608571785041-22349e5bfdb9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image6">
</div>
</div>
<div class="col7">
<div id="wb_Image7">
<img src="https://images.unsplash.com/photo-1609439408825-b2a24e29871f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image7">
</div>
</div>
</div>Без js:
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
img {
display: block;
max-width: 100%;
}
#FlexGrid2 {
display: flex;
}
#FlexGrid2 > * {
flex: 1;
display: flex;
transition-property: transform, flex;
transition-duration: 0.5s;
transition-timing-function: linear;
transform-origin: center top;
cursor: pointer;
}
#FlexGrid2 > * + * {
margin-left: 4px;
}
#FlexGrid2 > *:hover {
flex: 2;
}
#FlexGrid2 > *:first-child {
transform-origin: left top;
}
#FlexGrid2 > *:last-child {
transform-origin: right top;
}<div id="FlexGrid2">
<div class="col1">
<div id="wb_Image1">
<img src="https://images.unsplash.com/photo-1607022505609-a8978bdbe015?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image1">
</div>
</div>
<div class="col2">
<div id="wb_Image2">
<img src="https://images.unsplash.com/photo-1607801354062-c7520503e178?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image2">
</div>
</div>
<div class="col3">
<div id="wb_Image3">
<img src="https://images.unsplash.com/photo-1608755374285-1700d287bc52?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image3">
</div>
</div>
<div class="col4">
<div id="wb_Image4">
<img src="https://images.unsplash.com/photo-1608112906300-03db6a5af97c?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image4">
</div>
</div>
<div class="col5">
<div id="wb_Image5">
<img src="https://images.unsplash.com/photo-1608156618704-ab992d2e5152?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image5">
</div>
</div>
<div class="col6">
<div id="wb_Image6">
<img src="https://images.unsplash.com/photo-1608571785041-22349e5bfdb9?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image6">
</div>
</div>
<div class="col7">
<div id="wb_Image7">
<img src="https://images.unsplash.com/photo-1609439408825-b2a24e29871f?crop=entropy\u0026cs=tinysrgb\u0026fit=max\u0026fm=jpg\u0026ixid=MXw2ODk0MXwwfDF8cmFuZG9tfHx8fHx8fHw\u0026ixlib=rb-1.2.1\u0026q=80\u0026w=1080" id="Image7">
</div>
</div>
</div>