Rozszerzenie diva, na div sąsiadujący po najechaniu kursorem

Question

Witam.

Chcę zrobić tak, aby po najechaniu myszką na zdjęcie produktu, uzyskać taki efekt jak na stronie poniżej podaje w linku.

http://international.tiffany.com/collections/tiffany-1837?lppromo=cyc#p+1-n+10000-c+288191-s+5-r+-t+-ni+1-x+-pu+-f+-lr+-hr+-ri+-mi+-pp+0+6

 

Kombinowałem już na różne sposoby. Jestem już wykończony zabawą z tym efektem. 

Mam zrobione już to co widać na stronie ale nie wiem jak uzyskać okienko po najechaniu na produkt tak aby zajmowało miejsce diva obok i tak pokazywały się właściwości produktu. Próbowałem robić dynamiczną zmianę klasy poprzez dodawanie w divie kodu 

<div class="jewellery-product" onmouseover="this.className='jewellery-properties'" onmouseout="this.className='jewellery-product'"></div>

i raz, że po najechaniu coś niby działa to brzydko przeskakuje wszystko i delikatny ruch myszką powoduje, że widok jakby cały czas się odświeża. Mimo wszystko mógłby mi ktoś pomóc ogarnąć to rozwiązanie albo jakoś podpowiedzieć co należy zrobić ? 

Dodam, że powyższa metoda działałaby gdyby był dynamicznie nadawany z-index: dla elementów mających być poniżej. A tego niestety również nie potrafię zrobić.

Comments

Coś jest w kodzie nie tak. Chciałbym aby to wyglądało tak jak na moim projekcie poniżej. Pierwszy zrzut to jest to co mam w przeglądarce a drugi to jest tak jak bym chciał aby było po najechaniu. Jak wklejam to z pierwszego linku to rozjeżdża się to jakoś na stronie. 

Pod zrzutami kod css jaki mam zrobiony aby to działało tak jak teraz jest.

 

 

A tutaj kod html i css

<div id="product_97808" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97809" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97810" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97811" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div style="clear: both;"></div>
		
		<div id="product_97812" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97813" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97814" class="new-product">
			<img src="../97807.png" alt="" />
		</div>
		
		<div id="product_97815" class="new-product">
			<img src="../97807.png" alt="" />
		</div>

.new-product {
	outline: 1px solid black;
	width: 16%;
	min-width: 3rem;
	display: inline-block;
	position: relative;
	margin-left: -1px;
}

.new-product img {
	width: 100%;
	max-width: 100%;
}

 

Answer 1

https://codepen.io/mitelak/pen/mwBmVG
Nie potrzeba do tego nawet JS :D
Jakbyś miał jakieś pytania pisz, ale myślę, że kod w tym przypadku więcej rozjaśni niż jakiś wywód :)

Comments

A można jakoś zrobić aby ten obrazek ostatni po prawej stronie jak na niego najadę, to aby właściwości pokazywały się na obrazku po środku ?

---

Chciałbym to przerobić tak aby były obrazki obok siebie i każdy miał obrys

---

jak możesz zobacz na moją ostatnią odpowiedz

Answer 2

https://codepen.io/anon/pen/PjJmNV

Answer 3

Udało mi się już zrobić coś takiego:

 

HTML

<figure id="product_97808" class="new-product">
			<img src="../97807.png" alt="" />
			<figcaption class="product-properties"><p>Luxury jewelllery</p></figcaption>
		</figure>
		
		<figure id="product_97809" class="new-product">
			<img src="../97807.png" alt="" />
			<figcaption class="product-properties"><p>Luxury jewelllery</p></figcaption>
		</figure>
		
		<figure id="product_97810" class="new-product">
			<img src="../97807.png" alt="" />
			<figcaption class="product-properties"><p>Luxury jewelllery</p></figcaption>
		</figure>

 

CSS

.new-product {
	outline: 1px solid black;
	width: 16%;
	min-width: 3rem;
	display: inline-block;
	position: relative;
	margin-left: -1px;
}

.new-product img {
	width: 100%;
	max-width: 100%;
	z-index: 0;
	position: relative;
}

.product-properties {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	padding-left: 105%;
	z-index: -1;
	background: pink;
	opacity: 0;
	transition: all .3s ease-in-out;
}

.new-product:hover .product-properties{
	opacity: 1;
	z-index: 1;
}

.new-product:hover img{
	z-index: 2;
}

 

Teraz jak zrobić aby było jak na zrzucie poniżej