html - Corner ribbon in responsive image -
i need align corner ribbon image. here's managed do:
<div class="row"> <div class="col-sm-6"> <a href="http://website.com"> <img src="/images/web1.jpg"><div class="ribbon"><span>featured</span></div></img> </a><br><br> <hr> </div> <div class="col-sm-6"> <a href="http://website.com"> <img src="/images/web2.jpg"><div class="ribbon"><span>featured</span></div></img> </a><br><br> <hr> </div> </div> the css
.ribbon { position: absolute; right: 62px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; } .ribbon span { font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(45deg); width: 100px; display: block; background: #79a70a; background: linear-gradient(#9bc90d 0%, #79a70a 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; right: -21px; } .ribbon span::before { content: ''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79a70a; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79a70a; } .ribbon span::after { content: ''; position: absolute; right: 0%; top: 100%; z-index: -1; border-right: 3px solid #79a70a; border-left: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79a70a; } the ribbon works fine if put fixed height , width, how make ribbon stick right corner of image? thanks
edited
<div class="row"> <div class="col-sm-6"> <div class="wrappersa"> <a href="http://website.com"> <img class="img-responsive" src="/images/web3.jpg" /> <div class="ribbon-wrapper-green"> <div class="ribbon-green">new</div> </div> </a><br><br> <p><strong>website</strong<br>this website</p><br><hr> </div> </div> <div class="col-sm-6"> </div> </div> </div> css
.wrappersa { margin: 20px auto; width: 450px; height: 430px; position: relative; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(45deg); width: 100px; display: block; background: #79a70a; background: linear-gradient(#9bc90d 0%, #79a70a 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; right: -21px; } .ribbon-green:before, .ribbon-green:after { content:''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79a70a; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79a70a; } @media (max-width : 992px) { .wrappersa { margin: 20px auto; width: 100%; height: auto; position: relative; } }
this might said, ribbon doesn't take account if image size dynamically changed image sizes have fixed , same.
updated bottom text caption.
figure { display: inline-block; } figure img { vertical-align: top; } figure figcaption { padding: 5px 0; text-align: center; background: #9bc90d; } .wrapper { color: #fff; } /*****************/ .wrapper { margin: 20px auto; width: 450px; height: 430px; position: relative; } .ribbon-wrapper-green { width: 85px; height: 88px; overflow: hidden; position: absolute; top: -3px; right: -3px; } .ribbon-green { font-size: 10px; color: #fff; text-transform: uppercase; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(45deg); width: 100px; display: block; background: #79a70a; background: linear-gradient(#9bc90d 0%, #79a70a 100%); box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 19px; right: -21px; } .ribbon-green:before, .ribbon-green:after { content: ''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79a70a; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79a70a; } @media (max-width: 992px) { .wrapper { margin: 20px auto; width: 100%; height: auto; position: relative; } }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <div class="row"> <div class="col-sm-6"> <div class="wrapper"> <a href="https://something.io"> <figure> <img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=image" /> <figcaption><strong>website</strong> <br>this website </figcaption> </figure> <div class="ribbon-wrapper-green"> <div class="ribbon-green">new</div> </div> </a> <hr> </div> </div> <div class="col-sm-6"> <div class="wrapper"> <a href="https://something.io"> <figure> <img class="img-responsive" src="http://placehold.it/950x500/1c1c1c/fff/?text=image" /> <figcaption><strong>website</strong> <br>this website </figcaption> </figure> <div class="ribbon-wrapper-green"> <div class="ribbon-green">new</div> </div> </a> <hr> </div> </div> </div> </div>
Comments
Post a Comment