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.

<div> </div>

<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>
<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>
<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 */}

: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.

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*/}

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!

I am a smart girl.