css - How to display an image inside a div only when hovered the parent div? -

css - How to display an image inside a div only when hovered the parent div? -

<div class="spotlight-item width-2 height-2"> <a href="#" class="spotlight-info"> <h2 class="large"> random text </h2> </a> <img src="../images/background.jpg"> //actual image <a href="#" onclick="alert(111)"> <img class="play-button" src="<%theme%>images/play.png" style="width: 100px; height: 100px; margin-top: 30%; margin-left: 40%; display: none;"> </a> </div>

the image play-button class set display: none; default. however, when user hovers "spotlight-item" div, play-button image should set display: show;

how can this?

.spotlight-item:hover .play-button { display: x; }

x = inline, block or inline-block

css