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/

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.

Set auto height and width in CSS/HTML for different screen sizes

#Set auto height and width in CSS/HTML for different screen sizes

Larger Device, Medium Devices & Small Devices media queries. (Work in my Scenarios.)

Below media queries for generic Device type: – Larger Device, Medium Devices & Small Devices. This is just basic media types which work for all of scenario & easy to handle code instead of using various media queries just need to care of three media type.

/*###Desktops, big landscape tablets and laptops(Large, Extra large)####*/
@media screen and (min-width: 1024px){
/*Style*/
}

/*###Tablet(medium)###*/
@media screen and (min-width : 768px) and (max-width : 1023px){
/*Style*/
}

/*### Smartphones (portrait and landscape)(small)### */
@media screen and (min-width : 0px) and (max-width : 767px){
/*Style*/
}