如何在懸停時進行徽標縮放

我的導航欄左側有一個徽標，我希望它能夠在您將鼠標懸停在任何想法上時都具有縮放效果？我確實在可待因上嘗試了一些代碼，但由於某種原因，他們不工作我認爲我需要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

如何在懸停時進行徽標縮放

回答

相關問題