CODEWITHSUNDEEP
cssimagehover
user2719596
user2719596

Reputation: 1

css hover not executing

I want an image to slightly grow in size when hovering over it. I know it's pretty simple, but I have looked for a good hour over other examples and cannot seem to figure out what I am missing. I appreciate the help. These images are saved to my computer.

Scope 

<link type="text/css" rel="stylesheet" href="stylesheet.css"/>
<embed src="73797^alarmclock.mp3"; autostart="true"; loop="true"; hidden="true";/>

<body>

     <img src ="alarm clock2.jpg"/>

     <p>  Pulling the sheets into my body, I begin to sink back into the bed... 
          uggh... my alarm clock... time to get up..

         <img style = "position:absolute; top:300px; right: 0px; z-index:1" 
          src="computer.jpg"/>

         <IMG  ID="grow" STYLE= "position:absolute; TOP:1157px; LEFT:599px; 
          WIDTH:47px; z-index:2; HEIGHT:47px" SRC="icon2.gif"/> 

</body>

</html>

And here is the stylesheet.css

#grow:hover {
width: 100px;
height: 150px;
}

Upvotes: 0

Views: 82

Answers (3)

Hieu Le
Hieu Le

Reputation: 8415

The inline style which declared in the HTML element has a higher priority than other css rules. So consider make your rules !important or move the inline style out.

Anyway, the !important rules are not recommended to use regularly. So you have better remove your inline styles and put them in .css files (or at least <style> element inside <head>)

Upvotes: 2

Leo T Abraham
Leo T Abraham

Reputation: 2437

Try this style

#grow:hover {
width: 100px !important;
height: 150px !important;
}

Because you have written inline styles. In order to override it you need to add !important to the styles. Also try to write the html in lowercase and avoid unwanted spaces.

The best thing you can do is avoid inline style and write style as below:

#grow
{
    position:absolute; 
    top:1157px; 
    left:599px; 
    width:47px; 
    z-index:2; 
    height:47px
}

#grow:hover
{
    width: 100px;
    height: 150px;
}

Upvotes: 1

Sir
Sir

Reputation: 8280

Inline styles have priority over CSS i believe.

Change your CSS and HTML to the following:

#grow {
    position:absolute;
    top:1157px; 
    left:599px; 
    width:47px;
    z-index:2;
    height:47px
}
#grow:hover {
    width: 100px;
    height: 150px;
}

HTML:

<IMG  ID="grow" SRC="icon2.gif"/>

Upvotes: 2

Related Questions