"CSS Hover Effect Side Ribbon"
Bootstrap 3.3.0 Snippet by Mehedi-BN

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> <a href="#" class="ribbon-container"> <img src="http://placehold.it/240x160" alt=""> <span class="ribbon">Hey, I'm an omlette station!</span> </a> </div> </div> </div>
body { padding: 2em; font-size: 1em; /* ribbon scales accordingly */ } .ribbon-container { position: relative; display: inline-block; line-height: 1; } .ribbon-container img { vertical-align: middle; } .ribbon { position: absolute; bottom: 1em; left: 0; margin-right: 1em; padding: .75em 1.25em .75em .75em; border-radius: 0 .5em .5em 0; background-color: #39f; background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.1) 100%); box-shadow: inset 0 .062em 0 rgba(255,255,255,.6), 0 .125em .25em rgba(0,0,0,.2); color: #fff; text-shadow: 0 -.062em 0 rgba(0,0,0,.2); white-space: nowrap; transition: background-color .2s ease-in-out; } .ribbon:before, .ribbon:after { position: absolute; background-color: inherit; content: ""; } .ribbon:before { bottom: 0; left: -.5em; width: .5em; height: 3em; border-radius: 0 0 0 .5em; background-image: linear-gradient(to right, rgba(0,0,0,.2) 0%, rgba(0,0,0,0) 100%); } .ribbon:after { top: -1em; left: -.5em; width: .5em; height: 1em; border-radius: .5em 0 0 .5em; background-image: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 100%); box-shadow: 0 .062em 0 rgba(255,255,255,.6); } .ribbon-container:hover .ribbon { background-color: #7acc29; }

Related: See More


Questions / Comments: