Идея для дизайна сайта заблюренная надпись, которая будет проявляться при наведение на нее курсором мыши. Ниже представлен код который можно скопировать и применять в своем дизайне.
HTML:
<body>
<h2>
<span><i></i>D</span>
<span><i></i>O</span>
<span><i></i>B</span>
<span><i></i>R</span>
<span><i></i>O</span>
</h2>
</body>
CSS:
body
display: flex
justify-content: center
align-items: center
min-height: 100vh
background: #E0C3FC
h2
position: relative
display: flex
gap: 5px
color: #fff
font-size: 4em
cursor: pointer
h2 span
position: relative
filter: blur(5px)
padding: 0 5px
transition: 0.5s
h2 span:hover
filter: blur(0px)
transition: 0s
h2 span i
position: absolute
inset: 0
background: transparent
h2 span:hover i::before
content: ''
position: absolute
top: 0
left: 0
width: 2px
height: 8px
