html - How to overlay a play button over a video thumbnail image? -

-

I have got some image thumbnail images. Is there any way I use CSS (the class name in my play icon is overlays) While keeping the playback icon above the thumbnail image in the thumb center (the name of the item image in my thumbnail images)? & lt; Div class = "itemlieft" & gt; & Lt; Div class = "clipping" & gt; & Lt; One class = "imaging" href = "/ video / id8" title = "galaxy" & gt; & Lt; Img class = "ItemImage" src = "/ images / video 8.jpg" alt = "video 8" /> & Lt; Img class = "overlay icon" src = "/ images / 1.png" alt = "" /> & Lt; / A & gt; & Lt; One square = "periodinfoine" onmouseover = "exhibit 2 (this);" Onmouseout = "hideDuration2 (this);" Href = "/ video / id 1234" & gt; & Lt; Span class = "text" & gt; 51: 57 & lt; / Span & gt; & Lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "title" & gt; & Lt; A href = "/ video / id8" headline = "galaxy" & gt; Galaxy & lt; / A & gt; & Lt; / Div & gt; & Lt; Div class = "VideoAge" & gt; 1 day ago & lt; / Div & gt; & Lt; Div class = "PlaysInfo" & gt; Broadcast 265 & lt; / Div & gt; & Lt; / Div & gt;

My CSS: 

  .emem.ItemLeft, .emem.ItemMiddle, .emem.ItemRight {float: left; Margin-right: 15px; }. Clear {clear: both; } Img.ItemImage {Width: 18em; Height: 10 AM; }. Overlay icon (status: full; Top: 40px; Left: 65px; } << Code>   
 
 
 You can use the  status: absolute   .overlayIcon . For example:  
 . Image link {height: 300px; Width: 350px; Status: Relative; Display area; } .image {height: 300px; Width: 350px; }. Overlay icon (status: full; Top: 40px; Left: 65px; }   
 Work example:  
  Updates based on the first comment of user 1788736   
 The above solution only works When all the heights are identical and definite then you will need to adjust the  top  and  left  values ​​depending on the height of your playButton.png dimension.  
 If you can present JSFDial of currently (HTML, CSS, JEL), it is easy to adjust positioning more accurately.  
  Update comment based on user of 1788736   
 I uploaded a dummy image on my server which is the same size (56px x 37px). Here's an updated version of your Bela:  
  Based on the third comment of user information 1788736    
 When you say " How to get the value of overlays w and h? "I think that you are actually looking for  top  and  left  value  Overlays . If I am wrong then correct me.  
 First of all, if you do not want to do a function on your site that enables zooming / enlargement, just type the unit measurement for the  px  images.  
 Based on your JSFID thumb dimension, the  12em x 10em   is equal to 192px x 160px . The formula for getting  
  top  and  left  value  OverlayIconTop = (Item Image Highlight - Overlay Icon High) / 2 Overlay Icon Top = (160 - 37) / 2 = 61.5    / Pre> 
 (round to 61 or 62 because we can not be a decimal for px)  
  overlayon lift = (item image high - overlay icon high) / 2 overlay icon lift = (192 - 56) / 2 = 68

Comments

Post a Comment

Popular posts from this blog

excel vba - How to delete Solver(SOLVER.XLAM) code -

-
After opening several examples of macro / code written, I suddenly get stuck with a code that seems safe. Solver (SOLVER.XLAM) is doing this notation and I would like to remove it from my system. I do not think this is a relativant code. Can anyone tell me what should I do? I have already installed something to remove the password but Solver is still asking for password and I can not get rid of it! itemprop = "text"> Solver Excel is add-in If you want to delete it, then Excel Application & gt; Options & gt; Add-ins & gt; Search for 'Go to' button and gt; Uncheck the solver on the list like press something (I can not give you the exact path because I have the Polish version of Excel). Trying to open Solver's VBA code is not good because it There is allegedly copyright. Besides, I do not think Solver creates any disadvantages while working with Excel or VBA.
Read more

github - Teamcity & Git - PR merge builds - anyway to get HEAD commit hash? -

-
I have a team city build project with Gitbab VCS route, I have been triggered for both / head on PR and / Merge the referee. The annoying thing is that you can not do anything useful with the merged hash - it is not present in Gitobb. I want to exclude newsgate packages with head in gutub comet situations in the version number along with Hewash (Newsaging 7) for the music build, but against head hash. However, I can not see a way to get the head hashes while constructing that merge. I just want to head because it's useless - we only care about merge. (PR - Pull Request) This command works reliably while running One on / merge is git log --no-merge -1 ---- = '% h'
Read more

ios - Replace text in UITextView run slowly -

-
I have a UITextView and I change a word like the code at the end of UITextView.text: - (void) Replace TexttechWitWord: (NSString *) word {NSString * currentTextViewText = self.textView.text; CurrentTextViewText = [currentTextViewText stringByReplacingCharactersInRange: NSMakeRange ([self.textView.text length] - [word length], [word length]) withString: word; Self.textView.text = currentTextViewText; } Replacement work is fine, but it runs very slowly and very slowly when the textView now lengthens Is there any better way? I try the replacement range: with text for a week but still stuck. Not to know how to use it to replace it in your case. Please guide! Thanks in advance! This is an important job. As you are using an irreversible string and you are creating a very long string and before Assigned to NSString created from. NSString will be used instead of NSMutableString . - (UITableViewCell *) TableView: (UITableView *) Table View CellForOutPath: (NSIndex...
Read more