Responsive overlaying image?

I have a gallery for youtube videos for which this is the css:

#content #gallery {
  width: 100%;
  list-style: none;
  overflow: hidden;    

#content #gallery li {
  width: 24.89331436699858%;
  margin: 0 12.66002844950213% 1.5em 0;
  position: relative;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;      

#content #gallery li:nth-child(3n+3) {
  margin: 0 0 1.5rem;    

#content #gallery a {
  outline: none;    

#content #gallery img {
  max-width: 100%;
  height: auto    

What i miss in this css though is a some sort of play button. I have a small icon for that but I have no idea how to center that both vertical and horizontal on top of the thumbnail without having to use px with position absolute because I would like that icon to be responsive both in size and position

I hope this makes any sense?

Thank you in advance

You can absolutely position items perfectly center by doing this method.

  margin:auto;/*money maker*/

Codepen showing this. You need a width/height for the thumbnail, but I imagine you have that already since it’s just an image.

Hi Ryan.

Great sollution thanx a lot

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.