Make Bootstrap Popover Appear/Disappear on Hover Instead of Click

By default, Bootstrap’s popover box appears when the user clicks a specific element. However, you can also force this popover message box to appear on mouse hover instead of mouse click. There are two ways to accomplish this tasks.

Method 1: By adding data-trigger attribute to HTML markup

You can make the popover appear on mouse hover by simply adding data-toggle attribute to your HTML element and setting its value to hover.

<button id="pop1" class="btn btn-primary" data-toggle="popover" data-trigger="hover" title="Sample Popover 1" data-placement="top" data-content="This is first sample popover">Popover 1</button>

Method 2: By passing trigger argument while initialization.

In this method, you can simply pass trigger while initialization of popup and set it to hover.

$(function () {
    $('#pop2').popover({ trigger: "hover" });
})

Must Read: CSS Flip Animation

CSS3 Text Shadow Effect

The CSS text-shadow property is useful for adding shadow like effect to the text within a webpage. This property accepts a bunch of comma separated values.

Value 1 = Horizontal shadow position (Required)

Value 2 = Vertical shadow position (Required)

Value 3 = Blur radius. (Optional)

Value 4 = Colour of shadow. (Optional)

Basic text shadow effect,

p {
	text-shadow: 2px 2px 2px #FF6600;
}

Multiple text shadow effect,

p {
	text-shadow: 2px 2px 2px #FF6600, 5px 5px 5px #000000;
}

Click Here for demo.

Useful read: Querying Soft Deletes in Laravel

CSS3 Bouncing Ball

In this tutorial, we are going to create an awesome bouncing ball effect with help of pure CSS3 properties.

Must Read : Create Smooth image zooming with CSS transitions


HTML:

<div class="container">
	<div class="ball"></div>
	<div class="shadow"></div>
</div>

As you can see, we have three simple div elements. container is the main div which is wrapped around ball and shadow divs. 

CSS:

We are going to set height, width and margin to the container. This will help us to position the container div.

.container{
	width: 100px;
	height: 100px;
	margin: 0px auto;
}

Then, we are going to style the ball element,

.ball{
	position: absolute;
	width: 50px;
	height: 50px;
	background: #ad8766;
	margin: 0px auto;
	border-radius: 50%; 
	animation: bounce .5s infinite alternate;
}

We have given a height and width of 50px and border-radius of 50% to make it circular. Also, we are using animation property to apply a the bounce effect.

We are using following CSS properties to set styling to shadow div.

.shadow{
	position: relative;
	width: 50px;
	height: 25px;
	background: #ccc;
	top: 250px;
	border-radius: 50%;
	animation: shadow .5s infinite alternate;
}

We are going to set border-radius of 50% to make it circular and using animation property to apply shadow effect.

Animation:

Ball Animation:

@keyframes bounce {
	0%{
		margin-top: 200px;
		width: 50px;
		height: 50px;
	}
	20%{
		width: 40px;
		height: 60px;
	}
	40%{
		width: 40px;
		height: 60px;
	}
	60%{
		width: 45px;
		height: 55px;
	}
	80%{
		width: 50px;
		height: 50px;
	}
	100%{
		margin-top: 0px;
		width: 50px;
		height: 50px;
	}
}

Basically what we are doing here is we are starting with a margin-top of 200px at 0% to 0px at 100%. In the middle of animation we are changing the width and height of the ball to make it oval while falling down.

Shadow Animation:

@keyframes shadow {
	0%{
		transform: scale(0.5);
		opacity: 0.8;
	}
	100%{
		transform: scale(1);
		opacity: 0.2;
	}
}

To animate the shadow we are going to scale it to 0.5 and change its opacity to 0.8 at 0%. And At 100% we are going to scale it back to 1 and change its opacity to 0.2.

CSS3 Image Scale Effect

In this tutorial, we are going to take a look at simple image scale effect with CSS3 transition and transform properties.

Quick Tip : How To Create A Simple CSS3 Heart Pulsing Animations?

HTML:

<div class="container">
	<img class="photo" src="http://coffeecupweb.com/wp-content/uploads/2015/07/css3-scale-effect.jpg" alt="CSS3 Scale Effect" />
</div>

CSS:

.photo{
	width: 60%;
	height: auto;
	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.photo:hover{ 
	-webkit-transform: scale(1.3);
	-moz-transform: scale(1.3);
	transform: scale(1.3);
}

 

Add Stroke to Text With CSS3

CSS3 comes with lots of new and exciting features which can be used to add sizzling effects to your HTML.

Quick Tip : CSS3 Color Changing Background

In this  post, we are going to add a stroke to our text with help of CSS3. To do this we are going to use -webkit-text-stroke and -webkit-text-fill-color properties.


HTML: 

<div class="large">"Success is a lousy teacher. It seduces smart people into thinking they can't lose."</div>

CSS:

.large {
	font-size: 46px;
	font-weight: 900;
	font-family: 'Chewy', cursive;
	 -webkit-text-fill-color: white;
	-webkit-text-stroke: 2px black;
}

-webkit-text-fill-color property accepts one parameter, name of color or color code. And -webkit-text-stroke accepts two arguments width of stroke and color of stroke.

Note: This will work only with Chrome and Safari as these properties are supported only by webkit browsers.

CSS3 Color Changing Background

In one of my previous posts, I explained how easy it is to create a card flipping animation with CSS3 properties. In this post, we are going to build a color changing background with CSS3 animation properties.

To create this effect we are going to take advantage of keyframes.

See Also : Simple Image Zoom Effect With CSS3 Properties


HTML:

<!DOCTYPE html>
<html>
<head>
	<meta charset=utf-8 />
	<title>Color Changing Background</title>
</head>
<body>
	<!-- content -->
</body>
</html>

Our markup consist plain HTML layout. In this example, we are going to apply animation properties directly to the <body> tag, but you can also use it with a <div> element.

CSS:

body{
	margin: 0px;
	width: 100%;
	height: 100%;
	background-color: #120000;
	-webkit-animation: color 8s infinite alternate;
	animation: color 8s infinite alternate;
}
@-webkit-keyframes color {
	0%  {background-color: #120000;}
	25% {background-color: #FFAB60;}
	50% {background-color: #FC4605;}
	75% {background-color: #FFFFFB;}
	100%{background-color: #060000;}
}
@keyframes color {
	0%  {background-color: #120000;}
	25% {background-color: #FFAB60;}
	50% {background-color: #FC4605;}
	75% {background-color: #FFFFFB;}
	100%{background-color: #060000;}
}

As you can see, we are changing background-color on 0, 25, 50, 75 and 100. Also, we are using animation property to trigger the animation on body tag. This property accepts four parameters that are name of animation, duration, iterations and direction.

Note: This effect will work only with web browsers that support keyframe animations.

CSS3 Heart Pulsating Animation

In this post, we are going to create a simple heartbeat effect using CSS3. To create this effect we are going to use CSS3 Keyframes animation.

See Also : Simple Card Flip Animation With CSS3

Note : This effect will work with only browsers that support Keyframes animation.

HTML

<div class="container">
	<a href="http://coffeecupweb.com/">
		<img class="heart" src="heart.png" />
	</a>
</div>

The markup consist of a <img> tag element with an anchor tag, wrapped inside a div with class .container.

CSS

.container{
	width: 400px;
	text-align: center;
	margin: 100px auto;
}
.heart{
	width: 200px;
	height: auto;
	-webkit-animation: pulse .6 infinite alternate;
	-moz-animation: pulse .6s infinite alternate;
	animation: pulse .6s infinite alternate;
}
@-webkit-keyframes pulse{
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}
@-moz-keyframes pulse{
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}	
@keyframes pulse {
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}

As you can see, we are going to change the scale of the image at 25% to 1.2 and then put it back to normal at 50%.

@keyframes pulse {
	0% { transform: scale(1); }
	25%{ transform: scale(1.2);}
	50%{ transform: scale(1);}
	100% { transform: scale(1); }
}

To apply this effect we are using the animation property.

animation: pulse .6s infinite alternate;

 

CSS Flip Animation

In this tutorial, we are going to create a simple card flip effect with help of CSS transitions and transformations. This effect can be very useful to keep the user engaged.

Useful Read : Simple CSS3 Zoom Effect On Hover

HTML:

<div class="container">
	<div class="back"><img src="flip.jpg" /></div>
	<div class="front">Hover To Flip!</div>
</div>

As you can see, the HTML structure consist of a parent div with class container and two child divs each representing the front and back side of the card.

CSS:

.container{
	width: 300px;
	height: 300px;
	margin: 10px auto;
}
.container .front{
	position: absolute;
	-webkit-transform: perspective( 600px ) rotateY( 0deg );
	-moz-transform: perspective( 600px ) rotateY( 0deg );
	transform: perspective( 600px ) rotateY( 0deg );
	background: #ccc;
	width: 300px;
	height: 300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: transform .5s ease;
	-moz-transition: transform .5s ease;
	transition: transform .5s ease;
	line-height: 300px;
	text-align: center;
	font-size: 28px;
}
.container .back{
	position: absolute;
	-webkit-transform: perspective( 600px ) rotateY( 180deg );
	-moz-transform: perspective( 600px ) rotateY( 180deg );
	transform: perspective( 600px ) rotateY( 180deg );
	background: #ccc;
	width: 300px;
	height: 300px;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: transform .5s ease;
	-moz-transition: transform .5s ease;
	transition: transform .5s ease;
}
.container:hover .front{
	-webkit-transform: perspective( 600px ) rotateY(-180deg);
	-moz-transform: perspective( 600px ) rotateY(-180deg);
	transform: perspective( 600px ) rotateY(-180deg);
}
.container:hover .back{
	-webkit-transform: perspective( 600px ) rotateY(0deg);
	-moz-transform: perspective( 600px ) rotateY(0deg);
	transform: perspective( 600px ) rotateY(0deg);
}

Quick Overview:

  • We are using perspective property to enable 3D space.
  • We are going to set rotateY to 0 degree for div with class .front as it is already in the front.
  • For div with .back class, we are going to set rotateY property to 180 degree to make it flipped by default. And when the animation occurs it will rotate itself to 0 degree.
  • When a user hovers over the container div, we are going to rotate .front div to -180 degree and .back div to 0 degree.
  • We are using the backface-visibilty property, to make sure users will not see the back side of the elements while they are turning around.

 

How To Create Image Zoom Effect Using CSS3 Transitions

 

Hover effects are really exciting and fun topics. In the previous tutorials, we’ve already built image grayscale effect with CSS. In this post, I’ll share code snippets to create a simple and easy to use image zoom effect.

In this example, I’ve written the code in such a way that when a user hovers over the image, the photo enlarges while still staying within the boundaries of div element.

HTML: 

<div class="photo">
	<img src="image.jpg" alt="Image" />
</div>

As you can see, we’ve wrapped the image within a div element with class .photo. The image is of 500px X 500px dimensions.

CSS:

.photo{
	width: 350px;
	height: 350px;
	overflow: hidden;
}
.photo img{
	width: 100%;
	height: 100%;
	-webkit-transition: all 1s ease;
        -moz-transition: all 1s ease;
        -o-transition: all 1s ease;
        -ms-transition: all 1s ease;
        transition: all 1s ease;
}
.photo:hover img{
        -webkit-transform:scale(1.2);
        -moz-transform:scale(1.2);
        -ms-transform:scale(1.2);
        -o-transform:scale(1.2);
        transform:scale(1.2);
}

We are apply height and width of 350 pixels to the container div and making overflow to hidden. Also the height and width of image is set to 100%.

Whenever a user hovers over the image, transform property enlarges the image.

 

Convert Images to Grayscale with CSS Filters

Here’s a tiny piece of code which can used to convert normal images to grayscale. Using the following CSS code snippet you can convert coloured photos to black and white images. However, note that if the user downloads the image, it will be displayed in its original coloured format.

Useful Read : How To Equalize Heights of Divs?

To apply the grayscale, use the following CSS code.

img.grayscale {
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	filter: grayscale(1);
}

To apply the grayscale with hover effect, use the following CSS code,

img.photo{
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	filter: grayscale(1);
	-webkit-transition: all 1s ease;
	-moz-transition: all 1s ease;
	transition: all 1s ease;
}
img.photo:hover{
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	filter: grayscale(0);
	cursor: pointer;
}