Monthly Archives: December 2016

Responsive Tooltip With JavaScript And CSS

Hi all,
The tooltip functionality is very important part in web development.. Mainly it used in form, information in PHP or HTML.

Table Of Content

  1. HTML
  2. CSS
  3. JavaScript

The HTML




Add the rel=”tooltip” attribute to the target element and define the tooltip content using title attribute. You can also specify the directions using CSS classes as shown below: 

	Services

JavaScript

The main JavaScript to active the tooltips. Just include the following JS file at the bottom of the webpage and done.




CSS

Style the tooltips with the following CSS rules.

Full Code



  Tooltip style
  


	Services




If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.

Animated Image -HTML & CSS

The pure CSS and HTML techniques to create an animated image with caption effects when mouse hover on existing image.

Table Of Content

  • HTML
  • CSS

The HTML and CSS are very important part to develope this animated image operation.

The HTML

The animated image is represent in HTML using imgtag. And also image caption specify here.

 

    Thumb
    
Test Image Caption




The CSS

The CSS represent within

tag. Its very useful and attractive to desingn in web site development. 

*, *::before, *::after
	{
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
	}
	html, body
	{
		margin: 0px;
		padding: 0px;
		font-family: 'Lato',sans-serif;
		font-size: 18px;
		font-weight: 300;
		height: 100%;
		color: #fff;
	}
	figure
	{
		width: 400px;
		height: 300px;
		overflow: hidden;
		position: relative;
		display: inline-block;
		vertical-align: top;
		border: 5px solid #fff;
		box-shadow: 0 0 5px #ddd;
		margin: 1em;
	}
	figcaption
	{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		text-align: center;
		font-weight: bold;
		width: 100%;
		height: 100%;
		display: table;
	}
	figcaption div
	{
		display: table-cell;
		vertical-align: middle;
		position: relative;
		top: 20px;
		opacity: 0;
		color: #2c3e50;
		text-transform: uppercase;
	}
	figcaption div:after
	{
		position: absolute;
		content: "";
		left: 0; 
		right: 0;
		bottom: 40%;
		text-align: center;
		margin: auto;
		width: 0%;
		height: 2px;
		background: #2c3e50;
	}
	figure img
	{
		-webkit-transition: all 0.5s linear;
        transition: all 0.5s linear;
		-webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
	}
	figure:hover figcaption
	{
		background: rgba(255,255,255,0.3);
	}
	figcaption:hover div
	{
		opacity: 1;
		top: 0;
	}
	figcaption:hover div:after
	{
		width: 50%;
	}
	figure:hover img
	{
		-webkit-transform: scale3d(1.2, 1.2, 1);
        transform: scale3d(1.2, 1.2, 1);
	}

Full Code





	
Animated Image




  

    Thumb
    
Test Image Caption




If anyone has doubts on this topic then please do let me know by leaving comments or send me an email.