alt text

How can I make the play icon appear on each photo? Only with individual IDs is it possible? A lighter option?

  • > How can I make the play icon appear on hover over each photo? Che css - using the hover pseudo-class, with the background replaced (if implemented through the background) or with the appearance of a positioned element (display: none -> display: block, position: absolute, top: -100px). You can do the same through js - onmouseover, omouse events. > And easier option? What? - etki
  • Seems not to put it that way. I know that hover'om, just when I do through the class, when you hover on one, it appears on all. I want it to appear on the one on which I hover the cursor. I can of course give each element an ID and work like this. But it is a long time. Is there an easy way? - navi1893
  • @ navi1893, so you use hover on the jsfiddle.net/yFqFH shared container - etki
  • does not work = / jsfiddle.net/XcZjJ - navi1893
  • one
    @ navi1893 $ ('. controls img'). css ({'display': 'none'}) this construct searches for all .controls img, it’s strange to expect something else jsfiddle.net/XcZjJ/2 - etki

1 answer 1

img { position: relative; // Позиционирование потомков относительно родителя } img:hover:before { content: url("/images/play.png"); // Путь к вашей иконке. z-index: 1; // Изображение на уровень выше. position: absolute; // Абсолютно позиционируем. top: 50%; left: 50%; // Изображение размещено в центре элемента-родителя. }

A working example , only instead of the red square icon:

 .playlist p { width: 100px; height: 100px; background-color: black; display: inline-block; position: relative; } p:hover:before { width: 10px; height: 10px; background-color: red; content: ""; z-index: 1; position: absolute; top: 50%; left: 50%; } 
 <div class="playlist"> <p id="1"></p> <p id="2"></p> <p id="3"></p> <p id="4"></p> <p id="5"></p> </div>