Responsive overlaying image?

HTML & CSS
1

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

2

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

element
{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100px;
  height:100px;
  margin:auto;/*money maker*/
}

http://codepen.io/ryanreese09/pen/NPEgJp

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

3

Hi Ryan.

Great sollution thanx a lot

4

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