JQuery + CSS: how to place buttons on Images

JQuery + CSS: how to place buttons on Images

This document describes how to place buttons on Images Using JQuery + CSS. Share it with you for your reference. The specific analysis is as follows:

Position: relative is generally set to the parent layer of position: absolute; in daily applications,

Parent layer position: relative; Sub-layer position: absolute; is located according to the parent layer boundary,

Otherwise, position: absolute searches for the element boundary of position: relative layer by layer until the body element ..

Method 1 (append together with CSS)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

Var freeOne = ""; FreeOne = $ (". freePreviewOne"). attr ("data-url "); If (freeOne = null ){ // No free video } Else { $ ("# CoursePicture"). append ("<a class = 'hide-650 fade5'" + "Style = 'top: 94px; left: 150px; position: absolute; z-index: 100;" + "Width: 180px; height: 60px; border: 2px solid white;" + "Display: block; color: white; text-decoration: none;" + "Letter-spacing: 1px; font-size: 16px; line-height: 20px;" + "Text-align: center; padding-top: 18px;" + "Background-color: rgba (0, 0, 0, 0.44);" + "-Webkit-backface-visibility: hidden;-webkit-transition: all. 3 s release-in-out;" + "-Moz-transition: all. 3 s records-in-out;-ms-transition: all. 3 s records-in-out;" + "-O-transition: all. 3 s bytes-in-out;" + "Border-radius: 10px; '" + "Href = '# modal' data-toggle = 'modal'" + "Data-url = '" + freeOne + "'>" + "<Span class = 'contactus 'style = 'font-size: 26px; '> test </span> <span class = 'glyphicon glyphicon-play' style = 'font-size: 20px; top: 0; bottom: 2px; '> </span> </a>" ); }

Page:

?

1 2 3 4 5 6 7 8 9 10 11

<Div class = "es-row-wrap container-gap course-cover"> <Div class = "row-5-7 course-cover-heading"> <Div id = "coursePicture" class = "col-sm-5 picture hidden-xs" style = "position: relative;"> <# If course. coverImage? Has_content> <# Else> </# If> </Div> </Div> </Div>

Method 2:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// Place a button on the course Image /* <A class = "button hide-650 fade5" href = "# modal" data-toggle = "modal" data-url = "/course/hyjgz2np/lesson/preview? LectureId = hyjgz2n%49618%345325%%4212287697009742 "> <span class =" contactus "> <strong> extract </strong> </span> </a> */ // $ ("# CoursePicture "). append ("<a class = 'btn btn-sm btn-info' href = '# 'style = 'top: 120px; left: 180px; position: absolute; z-index: 100; '> average </a> "); Var freeOne = ""; FreeOne = $ (". freePreviewOne"). attr ("data-url "); If (freeOne = null ){ // No free video } Else { $ ("# CoursePicture"). append ("<a class = 'freepreviewpicture hide-650 fade5'" + "Href = '# modal' data-toggle = 'modal'" + "Data-url = '" + freeOne + "'>" + "<Span class = 'contactus 'style = 'font-size: 26px; '> test </span> <span class = 'glyphicon glyphicon-play' style = 'font-size: 20px; top: 0; bottom: 2px; '> </span> </a>" ); }

Page:

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<Style> . FreePreviewPicture { Top: 94px; Left: 150px; Position: absolute; Z-index: 100; Width: 180px; Height: 60px; Border: 2px solid white; Display: block; Color: white; text-decoration: none; Letter-spacing: 1px; font-size: 16px; Line-height: 20px; Text-align: center; padding-top: 18px; Background-color: rgba (0, 0, 0, 0.44 ); -Webkit-backface-visibility: hidden; -Webkit-transition: all. 3 s transfer-in-out; -Moz-transition: all. 3 s bytes-in-out; -Ms-transition: all. 3 s bytes-in-out; -O-transition: all. 3 s bytes-in-out; Border-radius: 10px; } </Style> <Div class = "es-row-wrap container-gap course-cover"> <Div class = "row-5-7 course-cover-heading"> <Div id = "coursePicture" class = "col-sm-5 picture hidden-xs" style = "position: relative;"> <# If course. coverImage? Has_content> <# Else> </# If> </Div> </Div> </Div>

Run the following command:

I hope this article will help you with jQuery programming.