user2008973 user2008973 - 2 months ago 14
Less Question

CSS Image on top of another image inside an anchor tag

I want to put two images inside an anchor tag where the second image is a player button which should be placed on top of the first image.
The anchor tag exists inside a span and that cannot change. Generally the HTML structure of the page cannot change.
Is it possible to achieve this?

This is what I have tried without success.



span.x {
display: block;
height: 40px;
width: 40px;
}
.x img {
width: 100%;
height: 100%;
.videoicon {
position: absolute;
top: 50%;
left: 50%;
}
}

<span class="x">
<a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM"
class="video-class" target="_blank">
<img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg" border="2px" alt="Video">
<img class="videoicon" src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.p ng/revision/latest?cb=20121111212438" data-pin-nopin="true">
</a>
</span>





EDIT
There are many span elements with different sizes like the above that should be placed dynamically inside a div every time the page is rendered. So, I am not able to use hard-coded height/width/top etc values.

Thank you

Answer

This may help you, if videoicon has fixed height and width, you can set its position by calc(50% - half of videoicon's height) i.e., calc(50% - 20px)

span.x {
  display: block;
  position: relative;
  height: 220px;
  width: 220px;
}
.x img {
  width: 100%;
  height: 100%;
}
.x .videoicon {
  position: absolute;
  top:calc(50% - 20px);
  left:calc(50% - 20px);
  height:40px;
  width:40px;
}
.small{
  margin-top:20px;
height:100px!important;
width:100px!important;
}
<span class="x">
  <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
   <img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px" alt="Video" />
   <img class="videoicon"  src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
  </a>  
</span>
<span class="x small">
  <a id="videolink" href="http://www.youtube.com/watch?v=ImTTW94ZicM" class="video-class" target="_blank">
   <img src="https://i.ytimg.com/vi/ImTTW94ZicM/mqdefault.jpg"  border="2px" alt="Video" />
   <img class="videoicon"  src="http://vignette3.wikia.nocookie.net/plazmabursttwo/images/a/a8/Play_button.png/revision/latest?cb=20121111212438" data-pin-nopin="true" />
  </a>  
</span>

Comments