0

I have written some code to make the text glow, however the text glows not only when the cursor is over the text but also when the cursor is over the horizontal area extended by the text. Why does this happen and how can i make it glow only when the cursor is over the text?

<!DOCTYPE html>
<html>
<head>
    <title>tTEXT</title>
</head>
<link rel="stylesheet" type="text/css" href="styles.css"/>
<body>
<style>
@font-face
{
    font-family: ralewaythin;
    src: url('Cantarell-Regular.ttf')
}
.backgroundimage
{
    background-position: center;
}
.text-glow-hover-with-delay
{
    color: black;
    -webkit-transition: text-shadow 0.15s;
}

.text-glow-hover-with-delay:hover
{
    text-shadow: 0 0 10px #4682b4;
}
.head
{
    font-family: ralewaythin;
    color: black;
    font-size: 75px;
    -webkit-text-stroke: 1px;
}
</style> 
    <div class="text-glow-hover-with-delay">
        <div class="head">TEXT</div>
    </div>
</body>
</html>
pranavsharma
  • 35
  • 1
  • 7

2 Answers2

3

Your text is in a <div>, which by default has display:block. If you want that element to be only as large as the word, change it to a <span> or give it display:inline-block.

Russell Zahniser
  • 16,188
  • 39
  • 30
0

It is because you declared the entire div to take the effect. You need to specify which text/element you wish to have glow. here is an example of me setting the glow effect to specific text using the span tag. You can use this with the h1 element if you just want the header text to glow, or any other tag.

http://jsfiddle.net/g5EbU/1/

<span class="text-glow-hover-with-delay" >GLOWING TEXT</span>

I didn't need to change your code, just where the class was at. Here was your code

.text-glow-hover-with-delay
{
color: black;
-webkit-transition: text-shadow 0.15s;
}

I hope this helps! if you need me to redo your class and use a header tag or something I can.

Matt
  • 2,500
  • 1
  • 16
  • 26