如何在悬停时进行徽标缩放

我的导航栏左侧有一个徽标，我希望它能够在您将鼠标悬停在任何想法上时都具有缩放效果？我确实在可待因上尝试了一些代码，但由于某种原因，他们不工作我认为我需要jquery，但现在我不想使用它。 .logo是导航栏徽标。任何帮助将是伟大的！如何在悬停时进行徽标缩放

body { 
 
    margin: 0px; 
 
    padding: 0px; 
 
    font-family: Arial; 
 
} 
 

 
.nav { 
 
    margin: 0; 
 
    opacity: 0.7; 
 
    background-color: #FFD700; 
 
    color: black; 
 
    list-style: none; 
 
    font-weight: bold; 
 
    text-align: right; 
 
    padding: 25px 0 25px 0; 
 
} 
 

 
.nav>li { 
 
    display: inline-block; 
 
    padding: 0 25px 0 25px; 
 
} 
 

 
.nav>li>a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.nav>li>a:hover { 
 
    color: #D2691E; 
 
} 
 

 
.logo { 
 
    color: black; 
 
    float: left; 
 
    position: absolute; 
 
    top: -65px; 
 
    left: -210px; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
} 
 

 
.logo>a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
.logo>a:hover {} 
 

 
.banner1 { 
 
    width: 100%; 
 
    display: block; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title> Trexon Music </title> 
 
<link rel="stylesheet" type="text/css" href="main.css"> 
 
</head> 
 
<body> 
 
    <ul class="nav"> 
 
    <div class="logo"> 
 
     <a href="default.asp"> 
 
     <img src="/Users/Mushriff/Desktop/Website/Images/Bannerlogo.psd"> 
 
     </a> 
 
    </div> 
 
    <li><a href="default.asp">Home</a></li> 
 
    <li><a href="contact.asp">Contact</a></li> 
 
    <li><a href="about.asp">About Us</a></li> 
 
    <li><a href="music.asp">Music</a></li> 
 
    <li><a href="merc.asp">Merchandise</a></li> 
 
    </ul> 
 
    <div class="banner"> 
 
    <img class="banner1" src="/Users/Mushriff/Desktop/Website/Images/Cover.psd"> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-05-25 Mush99

只需使用下面的CSS此

.logo img { 
    transition: all 0.5s ease-in-out; 
} 
.logo:hover img { 
    transform: scale(1.1,1.1); 
    transform-origin: 0 0; 
}

来源

2017-05-25 11:39:49

首先，使用.PNG或.JPG图像。

比在徽标图像上应用悬停效果。

.logo img { 
    -moz-transition: all 0.3s; 
    -webkit-transition: all 0.3s; 
    transition: all 0.3s; 
} 
.logo:hover img { 
    -moz-transform: scale(1.1); 
    -webkit-transform: scale(1.1); 
    transform: scale(1.1); 
}

概念可以在CodePen

来源

2017-05-25 11:42:25

你应该使用PNG，JPG，JPEG，...图像被清除。如果你想放大的图像效果只需添加下面的CSS

.logo img { 
    transition: all 0.5s ease-in-out; 
} 
.logo:hover img { 
    transform: scale(1.1,1.1); 
    transform-origin: 0 0; 
}

来源

2017-05-25 11:44:45 truonghungit

嘿，我没有你说什么，但它悬停变焦之前，我甚至达到标志，有什么建议，以作出正确的？ – Mush99

我明白了。请更改css '.logo img：hover { transform：scale（1.1,1.1）; transform-origin：0 0; }' – truonghungit

首先，如果你想要一个标志上传到你的网站，请使用以下文件格式，不要使用.PSD文件

网址：

GIF，PNG，JPEG

打开PSD psd编辑工具中的文件，如photoshop或illustrator并使其成为上述格式之一。

如果你想要悬停缩放效果尝试CSS3transition和transform属性。

.logo img { 
    transition: transform 1s ease; 
} 
.logo:hover img { 
    transform: scale(1.2,1.2); 
}

来源

2017-05-25 11:50:56 Bhuwan

.logo a > img :hover{ height: 100px; width: 100px;}

来源

2017-05-25 11:54:59 Priyangna

如何在悬停时进行徽标缩放

回答

相关问题