Action d'une class sur d'autres class sans toucher au html.

Bonjour tout le monde.

Je galère sur ma feuille de CSS pour ma boutique en ligne.
J'ai une petite question de CSS : comment formuler le fait que lorsque on "hover" sur l'image du produit le titre et le prix apparaissent dessus.

Actuellement tout est dissocié.
Je ne touche pas du tout au html seulement au CSS.

Merci d'avance !

voici la capture d'écran du code html.
Merci
Modifié par millimetree (20 Apr 2017 - 13:53)

Bonjour Mathieu, merci pour la réponse.
Je suis sur wordpress, j'utilise le thème virtue.

C'est mon premier échange sur alsacreations.

Oui l'exemple/lien ressemble un peu, moi je souhaite les infos sur l'image. Quand j'essaye , le prix prend le dessus et on ne peut plus cliquer sur l'image/lien.
Je ne sais pas si c'est clair....

MERCI

<div class="grid_item product_item clearfix post-16 product type-product status-publish has-post-thumbnail product_cat-coussin jsn-master last instock shipping-taxable purchasable product-type-simple">

	
	<a href="http://www.millimetree.com/produit/coussin-jacquard/" class="product_item_link product_img_link">

		 
                <img src="http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-365x365.jpg" srcset="http://www.millimetree.com/wp-content/uploads/2016/10/coussin5.jpg 2362w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-150x150.jpg 150w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-300x300.jpg 300w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-768x768.jpg 768w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-1024x1024.jpg 1024w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-180x180.jpg 180w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-600x600.jpg 600w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-1200x1200.jpg 1200w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-365x365.jpg 365w, http://www.millimetree.com/wp-content/uploads/2016/10/coussin5-365x365@2x.jpg 730w" sizes="(max-width: 365px) 100vw, 365px" class="attachment-shop_catalog size-365x365 wp-post-image" alt="Coussin jacquard" width="365" height="365">
                
    </a>
		<div class="product_details">
			<a href="http://www.millimetree.com/produit/coussin-jacquard/" class="product_item_link">
			<h5>Coussin jacquard</h5>			</a>

								<div class="product_excerpt">
						<p>Papier texturé 270 g, &nbsp;label FSC (provenance de&nbsp;forêts certifiées FSC). Impression letterpress et marquage à chaud bronze. Fabrication artisanale en France.&nbsp; Format : 21 x 30 cm</p>
					</div>
					</div>
		
	<span class="product_price headerfont"><span class="woocommerce-Price-amount amount">50,00<span class="woocommerce-Price-currencySymbol">€</span></span></span>

		</div>

.product_details {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	opacity:0;
}
.product_details:hover {
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	opacity:1;	
}

.product_item .product_details h5 {
	width: 100% ;
	background: rgba(223,217,217,0.4);
	margin : 0 auto !important;
	height: 201px !important;
	opacity:1;
   
}

.product_item .product_price.headerfont {
	opacity:1;
	position: absolute;
	top: 80%;
	width: 100%;
	height: 20%;
	background: rgba(223,217,217,1);
}	
.product_item .product_price {
    font-size: 14px;
    font-weight: 100!important;
	padding-top: 5%
}

après plusieurs essais, recherches, heures ....
j'ai enfin réussi
Merci Mathieu pour ton aide.
voilà j'ai ajouté cela à mon CSS :

div.product_details {
	display:none
}
.product_item:hover > div.product_details {
	display:block
}	
.product_item:hover > span.product_price.headerfont {
	display:block
}	
span.product_price.headerfont {
	display:none
}