This question is not answered. Helpful answers available: 2. Correct answers available: 1.


Permlink Replies: 0 - Pages: 1 Threads: [ Previous | Next ]
AndreWolff

Posts: 1,841
Registered: 14-Dec-2007
Superimpose video icon, challenge for CSS expert!
Posted: 30-Jul-2018 08:55
 
  Click to reply to this thread Reply
In this album I have some videos, where I like to display the video icon which you see in the upper left corner on the video thumbnails as you see here.

I use the next code for the thumbs table:
HTML:
 
<div id="thumbsgallery" class="thumbs-jg">
 
<a data-fancybox="S" href="slides/151004-141050_Vasse.jpg" data-width="1920" data-height="965" id="0" data-caption= ''>
  <img src="thumbs/151004-141050_Vasse.jpg" width="110" height="80" alt="Photo" title="  Photo" />
</a>
 
<a data-fancybox="S" href= "slides/5953412756_sd.mp4"  id="1" data-caption= ''>
  <img src="thumbs/5953412756_sd.jpg" class="video" width="110" height="80" alt="Flickr video" title=" Mp4 file downloaded from the Flickr site Flickr video" />
<span class="video-icon"><img src='res/video-icon.svg' alt='Video'></span>
</a>
 
<a data-fancybox="S" href= "slides/IMG_0877.mp4"  id="2" data-caption= ''>
  <img src="thumbs/IMG_0877.jpg" class="video" width="110" height="80" alt="iPhone video file" title="  iPhone video file" />
<span class="video-icon"><img src='res/video-icon.svg' alt='Video'></span>
</a>
 
<a data-fancybox="S" href="https://nl.wikipedia.org/wiki/Davos" data-type="iframe" id="3" data-caption= ''>
  <img src="thumbs/nl.wikipedia.org-430.jpg" width="110" height="80" alt="Wikipedia page" title=" Davos Wikipedia page" />
</a>
 
<a data-fancybox="S" href="https://player.vimeo.com/video/74152497" id="4" data-caption= ''>
  <img src="thumbs/vimeo.com-836.jpg" class="video" width="110" height="80" alt="Vimeo video" title=" Dunes and people in a nutshell: De Hors, Texel Vimeo video" />
<span class="video-icon"><img src='res/video-icon.svg' alt='Video'></span>
</a>
 
<a data-fancybox="S" href="https://www.youtube.com/embed/QbULyApj9Sw" id="5" data-caption= ''>
  <img src="thumbs/www.youtube.com-363.jpg" class="video" width="110" height="80" alt="YouTube video" title=" Texel: tour around the island and along the beach YouTube video" />
<span class="video-icon"><img src='res/video-icon.svg' alt='Video'></span>
</a>
 
</div>
 
CSS:
 
.video-icon img {
	position: absolute;
	top: 3px;
	left: 5px;
	width: 32px;
	height: 32px;
}
#thumbsgallery img {
	cursor: zoom-in;
	border-radius:  4px;
	padding:  0px;
	border: 2px solid;
	border-color: rgba(255,255,255,1.0);
	margin-right: 14px; 
	margin-left: 14px;
	margin-top: 2px;
	margin-bottom: 2px;
}
#thumbsgallery .video {
	border-color: rgba(255,0,0,1.0);
}
Who knows a simple solution to get this done?
Legend
Forum admins
Helpful Answer
Correct Answer

Point your RSS reader here for a feed of the latest messages in all forums