Center(vertical and horizontal) and Blur an Image

1. Center an image in a web page vertically and horizontally.
2. Blurring the Image when mouse over.

If we have only have a content division element like so:

<div> </div>

Centering an Image use CSS position and background:

<style>
div {
    /* Position content division element relative to the nearest positioned ancestor */
/* If the content division element has no positioned ancestors. it uses the document body.*/ 
   
    position: absolute;
/* Set size of div */
width: 100%;
height: 100%;
/* include image with an absolute URL */
/* background position is vertical center and horizontal center */
/* background-repeat is non repeat */
background:url('./test.png') 50% 50% no-repeat;
/* set image size 100px * 100px ( width * height)*/
background-size:100px 100px;
}
</style>

Centering an Image use CSS position and transform:

<style>
/* Position content division element relative to the nearest positioned ancestor and set up top and left.*/
position: absolute;
top:50%;
left:50%;
/* Draw Image */
background: red;
width: 100px;
height: 100px;
/* Move image's X-axis and Y-axis backwards 50% */
transform: translate(-50%, -50%);
</style>

Centering an Image use CSS Flexbox Layout

<div class=”container”>
<div class=”target”> </div>
</div>

Step one: Draw Image

.target {
width:100px;
height:100px;
background: orange;
}

Step two: Resize html and body tag

html, body {
height:100%;
margin:0; /* Default margin of body tag is 8, we need redefined margin to avoid the scrollbar */
}

Step three: Apply CSS Flexbox layout to container

.container {
display: flex; /* Display as a flex-level container */
height:100%;
align-items: center; /* horizontal */
justify-content: center; /* vertical */
}

Add selector when mouse over

:hover Select the elements when mouse over.

img:hover {
//Do something
}

Blurring the image

There are many ways to blurring an image. We can change the image opacity or we can filter the image using CSS filter.

Blurring an image by change the image opacity

The opacity property sets the opacity level for an elements. It describes the transparency-level. Where 1 is not transparent at all, 0 is completely transparent, 0.5 is 50% see-through.

img:hover {
opacity: 0.5; /*50% see-through*/
}

Blurring the image by using CSS filter function blur()

The blur() function apply Gaussian blur to the selected image, giving radius defines how many pixels on the screen blend into each other. A larger value will create more blur. 0 will leaves the input unchanged.

img:hover {
filter: blur(5px); /* Blur with 5px radius*/
}

Thank you!