Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Jquery

Hover Not Working And I Don't Know Why

Post a Comment
Hi I am a beginner trying to make my own website. I have had troubles trying to position an image and endow it with a hover property, here's the code I am basically trying to brin

Solution 1:

You can use scale to enlarge whole div on hover:

div {
  height: 30px;
  width: 30px;
  position: absolute;
  background: teal;
  top: 45%;
  left: 25%;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}
div:hover {
  transform: scale(1.3);
}
<imgsrc="logo.png"style="width:13%; position:absolute; top:11%; left:44.2%" /><divid="fbicon"><imgsrc="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg" /></div>

Solution 2:

Try this only change css bottom line:

HTML

<imgsrc="logo.png"style="width:13%; position:absolute; top:11%; left:44.2%"/><divid="fbicon"><imgsrc="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/></div>

CSS

div{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 45%;
    left: 25%;
    -webkit-transition: width 2s, height 2s;
    transition:  width 2s, height 2s;
}
div:hover{
    width: 40px;
    height: 40px;
}
divimg{width:100%; height:100%;}

Solution 3:

The reason why your code didn't work because you are only changing the height and width of the div but the image inside its parent div still have the same height and width.

Either you change the image size with respect to its parent div like

divimg{
   width:100%; 
   height:100%;
}

Or directly apply the hover effect on the image.

Solution 4:

HTML:

<body><divid="fbicon"><imgsrc="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg"/></div></body>

CSS: 

divimg {
      height: 30px;
      width: 30px;
      position: absolute;
      top: 20%;
      left: 25%;
      -webkit-transition: width 2s, height 2s;
      transition: width 2s, height 2s;
    }
    divimg:hover {
      width: 80px;
      height: 80px;
    }

Post a Comment for "Hover Not Working And I Don't Know Why"