Snipps - code snippets for daily development

CSS Code snippets

Trigger hover event on the parent when the child hover is active

Tags: trigger hover event, css parent, css hover

pulse image

Tags: css pulse image, pulse effect image css

Polaroid photo type

Tags: css, polaroid photo

Add asterisk to the required field

Tags: css ,required

align textwith others elements

Tags: css, flex, align

Copy to clipboard

                      .main-nav > li:hover > a {background: #ccc;}    

<nav>
    <ul class="main-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul class="main-sub-nav">
                <li><a href="#">About Sub 1</a></li>
                <li><a href="#">About Sub 2</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</nav>

Copy to clipboard

                      div{ animation: pulse 1.5s ease infinite; }
@keyframes pulse { 0% { transform: scale(1); }  50% { transform: scale(1.1); } 100% { transform: scale(1); }}

Copy to clipboard

                      .post_thumb{ 
	background: white;
	display: inline;
	float: left;
	margin: 0 10px 10px 0 ;
	padding: 10px 10px 25px;
	text-align: center;
	text-decoration: none;
	-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
	-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
	box-shadow: 0 4px 6px rgba(0,0,0,.3);
	-webkit-transition: all .15s linear;
	-moz-transition: all .15s linear;
	transition: all .15s linear;
	z-index:0;
    position:relative;
}

Copy to clipboard

                      .required .control-label:before {
 content: "*";
 color: red;
}

Copy to clipboard

                      .align-text-inline span{
 display: flex;
 justify-content: center;
 padding-left: 2px;
}