Optionally Remove the Gutter Padding from Columns

Optionally Remove the Gutter Padding from Columns

HTML:

<h1>CSS Helper for Gutterless <strong>Bootstrap 3</strong> Columns <i class="fa fa-heart"></i></h1>

<div class="container">
 <div class="row">
 <h2>With Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>
</div>

<div class="container">
 <div class="row no-gutter">
 <h2>Without Gutter</h2>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 <div class="col-sm-4">
 <a href="#" class="btn btn-block btn-primary">Full width Button</a>
 </div>
 </div>

</div>

CSS:

/*======================================
= NO GUTTER CODE =
======================================*/
.no-gutter > [class*='col-'] {
 padding-right:0;
 padding-left:0;
}

/*=========================================
= IGNORE - USED FOR LAYOUT =
=========================================*/
h1 { margin-bottom: 50px; }
h1, h2 { text-align: center; }
.container {
 background: #e3e3e3;
 margin-bottom: 20px;
 padding-bottom: 50px;
}
p {
 background: pink;
 margin: 0;
}
i {
 color: pink;
}

source: https://codepen.io/ncerminara/pen/hfvix/

Please follow and like us:
0

CSS Image hover show button

Hover on profile picture , upload or change profile picture option  will show.

by Using this user can show the profile picture and can upload the new image both from the same container. It looks good than older version.

Before upload , profile picture look like,

Stack of codes

On hover the Profile image, it will show a button. You can replace the button with input type file for select image. Below image is showing how it looks on hover profile picture.

For this the HTML Code is:

<div class="container">
    <img src="https://images.unsplash.com/photo-1488628075628-e876f502d67a?dpr=1&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=" alt="" />
    <p class="title">card title</p>
    <div class="overlay"></div>
    <div class="button"><a href="#"> BUTTON </a></div>
</div>

CSS Code:

.container {
 position: relative;
 margin-top: 50px;
 width: 500px;
 height: 300px;
}

.overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: rgba(0, 0, 0, 0);
 transition: background 0.5s ease;
}

.container:hover .overlay {
 display: block;
 background: rgba(0, 0, 0, .3);
}

img {
 position: absolute;
 width: 500px;
 height: 300px;
 left: 0;
}

.title {
 position: absolute;
 width: 500px;
 left: 0;
 top: 120px;
 font-weight: 700;
 font-size: 30px;
 text-align: center;
 text-transform: uppercase;
 color: white;
 z-index: 1;
 transition: top .5s ease;
}

.container:hover .title {
 top: 90px;
}

.button {
 position: absolute;
 width: 500px;
 left:0;
 top: 180px;
 text-align: center;
 opacity: 0;
 transition: opacity .35s ease;
}

.button a {
 width: 200px;
 padding: 12px 48px;
 text-align: center;
 color: white;
 border: solid 2px white;
 z-index: 1;
}

.container:hover .button {
 opacity: 1;
}

source: https://codepen.io/philcheng/pen/YWyYwG

If you like please comment below, by this i can understand you are liking or i have to improve more.. so please comment below. – matrix.

Please follow and like us:
0