CSS styling question

Hi all,

I am using the below shortcode to display 4 post in 4 columns.

<div class="display-posts-listing">
[display-posts id="1317,1319,1218,1145" posts_per_page="4" post_type="portfolio" image_size="portfolio-small" columns="4" wrapper="div"]
</div>

I am using the below CSS to apply a hover effect when I hover on one of the 4 posts the hover effect applies to all 4. Any thoughts on what I am doing wrong?

.display-posts-listing:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
}

.display-posts-listing img {
	-webkit-transition: opacity 180ms ease-in-out;
	-moz-transition: opacity 180ms ease-in-out;
	-o-transition: opacity 180ms ease-in-out;
	-ms-transition: opacity 180ms ease-in-out;
	transition: opacity 180ms ease-in-out;
}

https://www.ads-software.com/plugins/display-posts-shortcode/