css position - Responsive absolute positioned elements -


i have image slider need have link on 1 side. have set link want on image doesn't scale down when screen resized.

how absolute positioned element scale down screen size , move image resizing?

here jsfiddle https://jsfiddle.net/s0v6j04a/

<div class="sliders">         <div class="slider"><div id="promo1">         <div id="promo-link">         <a href="#">test link</a>         </div>             <img src="https://unsplash.imgix.net/photo-1434139240289-56c519f77cb0?fit=crop&fm=jpg&h=700&q=75&w=1050" />             </div>          </div>     </div>        #slider{     position:relative;     }  .div1, .div2 {     min-height: 400px;     background: #d25a1e;     position: relative;     width: calc(50% - 30px); } .div1 {     float: left;     background-image: url('https://ununsplash.imgix.net/photo-1433838552652-f9a46b332c40?fit=crop&fm=jpg&q=75&w=1050') !important;     background-repeat: no-repeat;     background-position: center center;      -o-background-size: 100% 100%, auto;     -moz-background-size: 100% 100%, auto;     -webkit-background-size: 100% 100%, auto;     background-size: 100% 100%, auto; } .div2 {     float: right;     background-image: url('https://ununsplash.imgix.net/photo-1427805371062-cacdd21273f1?fit=crop&fm=jpg&q=75&w=1050') !important;     background-repeat: no-repeat;     background-position: center center;       -o-background-size: 100% 100%, auto;     -moz-background-size: 100% 100%, auto;     -webkit-background-size: 100% 100%, auto;     background-size: 100% 100%, auto; } .div1:after, .div2:before {     content:'';     position: absolute;     top: 0;     width: 0;     height: 0; } .div1:after {     left: 100%;     border-top: 400px solid #d25a1e;     border-right: 50px solid transparent; } .div2:before {     right: 100%;     border-bottom: 400px solid #d25a1e;     border-left: 50px solid transparent; } #promo1{width:100%; position:relative;} #promo1 img{width:100%;} #promo-link{     position: absolute;     z-index: 100000;     left: 25%;     top: 50%;     font-size: 30px;     padding: 20px 40px;     border: 2px solid #fff;     } #promo-link a{     text-decoration:none;     color:#fff;     font-family:"times new roman", times, serif      }


Comments

Post a Comment

Popular posts from this blog

searchKeyword not working in AngularJS filter -

i writing app using angularjs on front end. want search through table word/field; 1 search box everything. according article here: http://hello-angularjs.appspot.com/searchtable can use filter: searchkeyword this. this code, , not working expected. <label>search: <input ng-model="searchkeyword"></label> <table ng-repeat="post in posts | orderby: sort | filter: searchkeyword"> <tr> <td> {{index(post)}} </td> <td> {{post.title}} </td> <td> {{post.author}} </td> <td> {{post.content}} </td> <td> {{post.date | date: "d/m/yyyy"}} </td> </tr> </table> what should do? thank you try this: controller $scope.posts = [ {title:'title one', author:'author one', content: 'content one'}, {title:'title two', author:'author two', content: 'cont...
Read more

sequelize.js - Sequelize: sort by enum cases -

i have model ( article ) field (the name type ) of type enum('source', 'translated') , return 1 article ordered type field. source articles should returned before translated articles. like: article.findone(order: [ { type: [ 'source', 'translated' ] } ]); unfortunately there appears no built-in solution sorting enums. instead have sort by case , couldn't find documentation on how sequelize. what conventional approach here? sorting case hard in sequelize, sort field (the second answer in linked post) should possible: order: sequelize.fn('field', sequelize.col('type'), 'source', 'translated') it's supported mysql far know though
Read more

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -

i trying use following code create interactive gui changes color-space(hsv, rbg, grayscale etc) on event of button click. display opencv video in tkinter using multiprocessing being new python having problems multiprocessing , attempts on making gui change it's color space on button clicks hangs entire system. on it's implementation highly appreciated. thankyou. below code: import cv2 pil import image,imagetk import tkinter tk import numpy np multiprocessing import process , queue def quit_it(root,process): root.destroy() process.terminate() def black_andwhite(root,process): process.terminate p=process(target=capture_image, args=(5,queue, )) p.start() root.after(0, func=lambda: update_all(root, image_label, queue)) def update_image(image_label, queue): frame = queue.get() = image.fromarray(frame) b = imagetk.photoimage(image=a) image_label.configure(image=b) image_label._image_cache = b root.update() def update_all(root...
Read more