JQuery + CSS is used to place buttons on images. jquerycss

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.