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);
}
<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%" />
<div id="fbicon">
  <img src="http://lorempixel.com/output/abstract-q-c-50-50-2.jpg" />
</div>

Solution 2:

Try this only change css bottom line:

HTML

<img src="logo.png" style="width:13%; position:absolute; top:11%; left:44.2%"/>
<div id="fbicon"><img src="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;
}
div img{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

div img{
   width:100%; 
   height:100%;
}

Or directly apply the hover effect on the image.


Solution 4:

HTML:

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

CSS: 

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

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