<p>Today's day 19 Goal is to build a CSS hover me transition.</p>
<h2 id="heading-html">HTML</h2>
<h3 id="heading-1-create-a-heading">1. Create a heading.</h3>
<ol>
<li>Write the following code.</li>
</ol>
<pre><code>&lt;h1&gt;hoverme&lt;/h1&gt;
</code></pre><h2 id="heading-css">CSS</h2>
<h3 id="heading-how-to-place-contents-to-center">how to place contents to center?</h3>
<pre><code>body{
    <span class="hljs-attr">display</span>: grid;
    place-content: center;
}
</code></pre><h3 id="heading-how-to-display-an-object-using-pseudo-element">how to display an object using pseudo element?</h3>
<pre><code>h1::before{
    <span class="hljs-attr">content</span>: <span class="hljs-string">""</span>;
    display: block;
    background-color: rgb(<span class="hljs-number">93</span>, <span class="hljs-number">104</span>, <span class="hljs-number">231</span>);
    height: <span class="hljs-number">1</span>em;
    width: <span class="hljs-number">1</span>em;
    position: absolute;
}
</code></pre><h3 id="heading-how-to-display-object-using-hover-element">how to display object using hover element?</h3>
<pre><code>h1:hover::before{
</code></pre><h2 id="heading-javascript">JavaScript</h2>
<p>-</p>
<h2 id="heading-conclusion">Conclusion</h2>
<ol>
<li><p>Place contents to center.</p>
</li>
<li><p>Display an object using pseudo element.</p>
</li>
<li><p>Display object using hover element.</p>
</li>
</ol>
<h2 id="heading-my-code">My Code:</h2>
<blockquote>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1667652964589/K7X_E_1U8.png" alt="day 19 css hoverme 1.png" /></p>
<p><img src="https://cdn.hashnode.com/res/hashnode/image/upload/v1667652975402/bmKHKblmJ.png" alt="day 19 css hover me 2.png" /></p>
</blockquote>
<p>Author: Dheeraj.y</p>


Today's day 19 Goal is to build a CSS hover me transition.

## HTML
### 1. Create a heading.

1. Write the following code.

```
<h1>hoverme</h1>
``` 

## CSS

### how to place contents to center?
```
body{
    display: grid;
    place-content: center;
}
``` 
### how to display an object using pseudo element?

```
h1::before{
    content: "";
    display: block;
    background-color: rgb(93, 104, 231);
    height: 1em;
    width: 1em;
    position: absolute;
}
``` 
### how to display object using hover element?

```
h1:hover::before{
``` 

## JavaScript
-


## Conclusion

1. Place contents to center.

1. Display an object using pseudo element.

1. Display object using hover element.

## My Code: 
> 
![day 19 css hoverme 1.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667652964589/K7X_E_1U8.png align="left")

> 
![day 19 css hover me 2.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1667652975402/bmKHKblmJ.png align="left")

Author: Dheeraj.y




Project based Learning using HTML CSS JS- Day 19

HTML

1. Create a heading.

how to place contents to center?

how to display an object using pseudo element?

how to display object using hover element?

JavaScript

Conclusion

My Code:

dheerajy blog