Hover Not Working And I Don't Know Why
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"