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 !

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
}