JQuery + CSS is used to place buttons on images. jquerycss
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)
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 transition-in-out; "+"-moz-transition: all. 3 s queue-in-out;-ms-transition: all. 3 s transition-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:
<div class="es-row-wrap container-gap course-cover"> <div class="row 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:
// 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 = regular "> <span class =" contactus "> <strong> strong </strong> </span> </a> * // $ (" # coursePicture "). append ("<a class = 'btn btn-sm btn-info' href = '# 'style = 'top: 120px; left: 180px; position: absolute; z-index: 100; '> require </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:
<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 .3s ease-in-out; -moz-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; border-radius: 10px; } </style> <div class="es-row-wrap container-gap course-cover"> <div class="row 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.