Как добавить всплывающее окно для обмена изображениями, содержащимися во flexbox?

Question

Я пытаюсь изменить изображение, которое у меня есть внутри гибкого элемента, но на данный момент у меня заканчиваются идеи о том, что я мог бы сделать, или если это вообще возможно. Кроме того, я хочу сохранить цвет фона позади изображения, если это имеет какое-либо значение.

Это также мой первый раз, когда я использую flexbox. Я начал учиться кодировать три дня go. Поэтому извините, если это глупый вопрос.

HTML

    <main>
        <section class="digital">
            <img src="images/digital.png" alt="digital">
        </section>
        <section class="graphic">
            <img src="images/graphic.png" alt="graphic">
        </section>
        <section class="fashion">
            <img src="images/fashion.png" alt="fashion">
        </section>
        <section class="social">
            <img src="images/social.png" alt="social">
        </section>
    </main>

CSS

main{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 100%;
}
.digital{
    flex: 1 1 auto;
    background: #9EF7CD;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.graphic{
    flex: 1 1 auto;
    background: #FF8CAE;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.fashion{
    flex: 1 1 auto;
    background: #F4B550;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
.social{
    flex: 1 1 auto;
    background: #9BC1FF;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
}
'''

Answer 1

Вы можете изменить изображение на CSS background-image и написать :hover для самого основного тега

main{
    width: 100%;
    height: 600px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    max-height: 100%;
}
.digital{
    flex: 1 1 auto;
    background: #9EF7CD;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
	background-image: url('images/digital.png');
	background-repeat: no-repeat;
}
.digital:hover{
    background-image: url('images/graphic.png');
	background-repeat: no-repeat;
}
.graphic{
    flex: 1 1 auto;
    background: #FF8CAE;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
	background-image: url('images/graphic.png');
	background-repeat: no-repeat;
}
.graphic:hover{
    background-image: url('images/digital.png');
	background-repeat: no-repeat;
}
.fashion{
    flex: 1 1 auto;
    background: #F4B550;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
	background-image: url('images/fashion.png');
	background-repeat: no-repeat;
}
.fashion:hover{
    background-image: url('images/social.png');
	background-repeat: no-repeat;
}
.social{
    flex: 1 1 auto;
    background: #9BC1FF;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
	background-image: url('images/social.png');
	background-repeat: no-repeat;
}
.social:hover{
    background-image: url('images/fashion.png');
	background-repeat: no-repeat;
}

<main>
	<section class="digital"></section>
	<section class="graphic"></section>
	<section class="fashion"></section>
	<section class="social"></section>
</main>

Вы можете удалить второй тег Чтобы изменить размер и положение изображения Вы можете использовать background-position и background-size CSS

Answer 2

Наконец-то я пришел к решению! Не уверен, что он самый элегантный, но он работает так, как я задумал.

Спасибо всем, кто помог!

    <main>
        <section class="digital">
            <div class="digital1"></div>
        </section>
        <section class="graphic">
            <div class="graphic1"></div>
        </section>
        <section class="fashion">
            <div class="fashion1"></div>
        </section>
        <section class="social">
            <div class="social1"></div>
        </section>
    </main>

CSS

main{
    width: 100%;
    max-height: 650px;
    display: flex;
    flex-wrap: wrap;
}
.digital{
    flex: 1 1 auto;
    display: flex;
    background: #9EF7CD;
    height: 650px;
    width: 250px;
}
.digital1{
    height: 650px;
    width: 250px;
    background-image: url(../images/digital-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.digital1:hover{
    background-image: url(../images/digital-2.png);
}
.graphic{
    flex: 1 0 auto;
    display: inline-flex;
    background: #FF8CAE;
    height: 650px;
    width: 250px;
}
.graphic1{
    height: 650px;
    width: 250px;
    background-image: url(../images/graph-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.graphic1:hover{
    background-image: url(../images/graph-2.png);
}
.fashion{
    flex: 1 0 auto;
    display: inline-flex;
    background: #F4B550;
    height: 650px;
    width: 250px;
}
.fashion1{
    height: 650px;
    width: 250px;
    background-image: url(../images/fashion-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.fashion1:hover{
    background-image: url(../images/fashion-2.png);
}
.social{
    flex: 1 0 auto;
    display: inline-flex;
    background: #9BC1FF;
    height: 650px;
    width: 250px;
}
.social1{
    height: 650px;
    width: 250px;
    background-image: url(../images/social-1.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin: 0 auto;
}
.social1:hover{
    background-image: url(../images/social-2.png);
}