Как сделать так, чтоб при наведении курсора на картинку, по обе стороны от нее появлялись еще две картинки?

Question

[mikha111]

Подскажите пожалуйста как реализовать данную задачу?

Answer 1

[0xD34F]

Тут могут помочь order и ~:

<div class="container">
  <img class="center" src="...">
  <img class="left" src="...">
  <img class="right" src="...">
</div>

.container {
  display: flex;
}

.center {
  order: 2;
}
.left {
  order: 1;
  visibility: hidden;
}
.right {
  order: 3;
  visibility: hidden;
}

.center:hover ~ .left,
.center:hover ~ .right {
  visibility: visible;
}

https://jsfiddle.net/561pc9gr/

Answer 2

[Дмитрий Хватов]

<style>
	.img1{
		width:100px;
		height:80px;
		background-color:#494949;
		border-radius:20px;
	}
	.img{
		width:0px;
		height:0px;
		opacity:0;
	}
	.img1:hover + .img{
		opacity:1;
		width:100px;
		height:80px;
		background-color:#494949;
		border-radius:20px;
		margin:
	}
</style>

<img class="img1" src="#"/>
<img class="img" src="#"/>
<img class="img" src="#"/>

Обратите внимание на :hover +