Enlarge Image with Smooth Transition – Jquery CSS

Enlarge Image with Smooth Transition – Jquery CSS
In this article we are going to see how to zoom an image when mouse pointer enters the image and how to make it to its original size when mouse leave.

We are going to use mouseenter and mouseleave events of jquery.

In this code, We are using -webkit-transition for smooth enlarging of image when mouseenters and taking back to its original size when mouse leaves.

Similar to mouseenter and mouseleave, we can substitute other events like mouseover, mouseout, hover etc.

Pop up Screen using jquery and CSS

Pop up Screen using CSS
In this article we are going to see how to create a pop-up screen using jquery and CSS. We are going to set a link, When user clicks that link a pop-up screen will get displayed and a video has been embedded in the pop-up screen (Autoplay video). We are going to have a close button in the pop-up screen which brings it back to main page.

on clicking show, this screen appears

Pop-up Screen Using Bootstrap

Pop-up Screen Using Bootstrap:
In this article we are going to see how to create a pop-up window with the help of Bootstrap.

Whenever user clicks a button, a pop-up window will open in the same screen with background in light color.

We are going to use in-build class in Bootstrap for this purpose Modal.

Lets see these modal class in detail before we go ahead with coding,

class name = modal –> Creates a modal (pop-up window)
class name = model-content –> Designing modal window and also acts as a contained holding modal header, modal body and modal footer
class name = model-header –> Acts as a header for Modal
class name = model-body –>  Modal body
class name = model-footer –> Modal footer
class name = model – sm, modal – lg –> In built size of model window size, sm is small and lg is for large

In addition this, there are also few more modal events which can be used for better user experience


Now let us see an example of Modal

Please download Bootstrap for this or you can use the url for this bootstrap purpose


After clicking the button,


Custom Designed Alerts

Custom Designed Alerts
Most of the end users will not be interested in seeing default alert messages that our system provides.

default alert
In this article we are going to see some custom designed Alert Box and messages.
For this code to work, please download js and css files from Here. Also please download jquery-1.11.3.min.js file.

Sweet Alert:
We are going to see how to show custom designed alert boxes of Sweet Alert.
This sweet alert takes 3 attributes

swal(‘title’,’text’,’type’ );

Swal – Sweet Alert, you can also use SweetAlert in place of Swal
title – Title for the alert box (required)
text – Message to be displayed to the user
type – There are 4 types of type

Now let us see examples of using Sweet Alert,


We have designed 4 buttons to display 4 designs of alert.

Alert Design 1 – Will display customized alert box.
Alert Design 2 – Will display an alert box that will disappear in 2 seconds
Alert Design 3 – Will display an alert of type warning
Alert Design 4 – Will display an alert with custom image.

Alert Design 1 Output:


Alert Design 2 Output:


Alert Design 3 Output:


Alert Design 4 Output:


Html inside Another HTML – Ajax + Jquery

Html inside Another HTML – Ajax + Jquery
Today, In this article we are going to see how to load a html/jsp file into another file using ajax.

Many applications make use of Ajax for loading form/file dynamically in the same page to improve performance of the application. When a user selects the option from drop-down box or when user clicks a button etc. We may be required to load or show a Html/Jsp/Forms based on the user input or when user performs any action.

So let us see an example code about how to load a JSP/HTML file within another JSP/HTML file.

Let us create 2 JSP files for this example,


We are just creating a sample text in form1.jsp
Now we are going to bring this form1.jsp into form2.jsp when user clicks a button

From the above code, We are using ajax and we are setting the URL of form1.jsp and we are setting its type (html). We are setting the time for the form1 to be displayed and if url and datatype is success, then it will get displayed inside <div> </div>

On clicking the button,